이미지경로 상태표시줄에서 숨기기 및 스킨 테스트 부탁드려요 정보
이미지경로 상태표시줄에서 숨기기 및 스킨 테스트 부탁드려요
관련링크
본문
갤러리 스킨 작업중 라이트 박스라는 스크립트를 적용하면서 이미지 경로 노출문제로 질문드립니다.
팝업으로 보여줄 이미지 파일을 다음과 같은 형식으로 링크해야만 한다는 전제로 출발합니다.
별도의 팝업 스크립트가 필요치 않고, 테이블 셀에 링크할수도 없는 상황입니다.
리스트 스킨에서 <a href='$file' rel='lightbox'>$img</a> 링크한경우,
상태표시줄에 아래처럼 이미지 경로가 노출되는데 이 경로를 숨길 수 있는 방법을 찾고 있습니다.
http://phosay.com/g4/data/file/demo_gallery/3554820845_1358ec7a_B1D7+BCB6BFA1+B0A1B0EDBDCDB4D9.jpg
반드시 <a href='이미지 경로' rel='lightbox'>썸네일</a> 형식으로 링크되어야할때 노출되는 이미지 경로를 가리는 방법이 있을까요?
조언 부탁드립니다.
미리보기 링크1 http://phosay.com/g4/bbs/board.php?bo_table=demo_gallery
목록에서 썸네일 이미지에 마우스를 올려보시면 상태표시줄이 상당합니다.
상태표시줄에 여타 기능을 넣어서 가리는 방법이 아닌 원천적인 방법이 있다면 좋겠습니다.
또한 썸네일을 클릭해보면 라이트 박스라는 스크립트의 기능을 보실 수 있습니다.
리스트의 썸네일을 클릭할때만 적용되도록 해놓았습니다.
그외 미리보기 상단 중앙의 '슬라이드쇼(전체, 카테고리, 정렬옵션)' 이라는 슬라이드쇼 기능을 테스트 부탁드립니다.
등록순, 조회순, 추천순 혹은 각 카테고리(분류)별로 목록에 정렬된대로 해당 이미지만 슬라이드쇼로 보여주는 기능이 특징입니다.
FF와 msie에서는 별 무리없이 동작하는듯 합니다.
팝업으로 보여줄 이미지 파일을 다음과 같은 형식으로 링크해야만 한다는 전제로 출발합니다.
별도의 팝업 스크립트가 필요치 않고, 테이블 셀에 링크할수도 없는 상황입니다.
리스트 스킨에서 <a href='$file' rel='lightbox'>$img</a> 링크한경우,
상태표시줄에 아래처럼 이미지 경로가 노출되는데 이 경로를 숨길 수 있는 방법을 찾고 있습니다.
http://phosay.com/g4/data/file/demo_gallery/3554820845_1358ec7a_B1D7+BCB6BFA1+B0A1B0EDBDCDB4D9.jpg
반드시 <a href='이미지 경로' rel='lightbox'>썸네일</a> 형식으로 링크되어야할때 노출되는 이미지 경로를 가리는 방법이 있을까요?
조언 부탁드립니다.
미리보기 링크1 http://phosay.com/g4/bbs/board.php?bo_table=demo_gallery
목록에서 썸네일 이미지에 마우스를 올려보시면 상태표시줄이 상당합니다.
상태표시줄에 여타 기능을 넣어서 가리는 방법이 아닌 원천적인 방법이 있다면 좋겠습니다.
또한 썸네일을 클릭해보면 라이트 박스라는 스크립트의 기능을 보실 수 있습니다.
리스트의 썸네일을 클릭할때만 적용되도록 해놓았습니다.
그외 미리보기 상단 중앙의 '슬라이드쇼(전체, 카테고리, 정렬옵션)' 이라는 슬라이드쇼 기능을 테스트 부탁드립니다.
등록순, 조회순, 추천순 혹은 각 카테고리(분류)별로 목록에 정렬된대로 해당 이미지만 슬라이드쇼로 보여주는 기능이 특징입니다.
FF와 msie에서는 별 무리없이 동작하는듯 합니다.
댓글 전체
왜 $file 의 경로가 절대 경로로 잡혀 있을까요?......
보통 상대 경로로 나오는데.....테이블 셀까지 안된다면....ㅠ.ㅠ
혹 $file 추출부분 소스라도 좀 알수가 있을까요?
보통 상대 경로로 나오는데.....테이블 셀까지 안된다면....ㅠ.ㅠ
혹 $file 추출부분 소스라도 좀 알수가 있을까요?
네잎클로버님 안녕하세요?
아침일찍 감사합니다.
lightbox 관련 스크립트 파일을 페이지로 불러들인다음
<script type="text/javascript" src="<?=$board_skin_path?>/lightbox_plus/lightbox_plus.js"></script>
단순히 <a href='보여줄 이미지' rel='lightbox'> 이렇게 해주어야만 작동하는 관계로 단순 무식하게 원본을 링크했더니 동작은 하지만 볼쌍사나운 사태가 벌어진것입니다.
아래는 썸네일 생성부분으로 thumb/bf_file명과 동명의 썸네일이 생성되도록 수정된 것입니다.
for ($i=0; $i < count($list); $i++) {
if ($i > 0 && $i % $mod == 0)
echo "</tr><tr>";
$img = "<img src='$board_skin_path/img/noimage.gif' border=0 width='" . $board['bo_1'] . "' title='이미지 없음'>";
$file = $data_path .'/'. $list[$i]['file'][0]['file'];
if (preg_match("/\.(jp[e]?g|gif|png)$/i", $list[$i]['file'][0]['file']) && file_exists($file)){
$thumb = $thumb_path.'/' . $list[$i]['file'][0]['file'];
if (!file_exists($thumb)) {
$size = getimagesize($file);
if ($size[2] == 1)
$src = imagecreatefromgif($file);
else if ($size[2] == 2)
$src = imagecreatefromjpeg($file);
else if ($size[2] == 3)
$src = imagecreatefrompng($file);
else
break;
//가로,세로 최대사이즈 제한, Daeng`2님 팁
if ($size[0] >= $size[1]) {
$rate = $board[bo_1] / $size[0];
$width = $board[bo_1];
$height = (int)($size[1] * $rate);
}
else {
$rate = $board[bo_1] / $size[1];
$width = (int)($size[0] * $rate);
$height = $board[bo_1];
}
$dst = imagecreatetruecolor($width, $height);
imagecopyresampled($dst, $src, 0, 0, 0, 0, $width, $height, $size[0], $size[1]);
imagepng($dst, $thumb, $board['bo_2']);
chmod($thumb, 0707);
/* //원본-가로기준 세로는 비율대로 반영
$rate = $board['bo_1'] / $size[0];
$height = (int)($size[1] * $rate);
$dst = imagecreatetruecolor($board['bo_1'], $height);
imagecopyresampled($dst, $src, 0, 0, 0, 0, $board['bo_1'], $height, $size[0], $size[1]);
imagepng($dst, $thumb, $board['bo_2']);
chmod($thumb, 0707);
*/
}
if (file_exists($thumb))
$img = "<img src='$thumb' border='0' title='" . $list[$i]['file'][0]['source'] . " Hit: " . $list[$i]['wr_hit'] . "'>";
}
$style = "";
if ($list[$i]['icon_new'])
$style = " style='font-weight:bold;' ";
$subject = "<span $style>" . cut_str($list[$i]['subject'], 14) . "</span>";
$comment_cnt = "";
if ($list[$i]['comment_cnt'])
$comment_cnt = "<a href=\"{$list[$i][comment_href]}\"><span style='font-size:7pt;'>{$list[$i][comment_cnt]}</span></a>";
echo "<td width='{$td_width}%' valign=bottom style='word-break:break-all;'>";
echo "<table width=100%>";
echo "<tr><td height=5></td></tr>";
echo "<tr><td align=center><a href='$file' rel='lightbox'>$img</a></td></tr>";//라이트박스 적용
echo "<tr><td align=center><a href='{$list[$i][href]}'>$subject</a>{$comment_cnt}</td></tr>";
if ($is_category) echo "<tr><td align=center><a href='{$list[$i][ca_name_href]}'><font color=#CCCCCC>[{$list[$i][ca_name]}]</a>{$list[$i][datetime2]}</font></td></tr>";
if ($is_checkbox) echo "<tr><td align=center><input type=checkbox name=chk_wr_id[] value='{$list[$i][wr_id]}'></td></tr>";
echo "<tr><td height=5></td></tr>";
echo "</table></td>\n";
}
아침일찍 감사합니다.
lightbox 관련 스크립트 파일을 페이지로 불러들인다음
<script type="text/javascript" src="<?=$board_skin_path?>/lightbox_plus/lightbox_plus.js"></script>
단순히 <a href='보여줄 이미지' rel='lightbox'> 이렇게 해주어야만 작동하는 관계로 단순 무식하게 원본을 링크했더니 동작은 하지만 볼쌍사나운 사태가 벌어진것입니다.
아래는 썸네일 생성부분으로 thumb/bf_file명과 동명의 썸네일이 생성되도록 수정된 것입니다.
for ($i=0; $i < count($list); $i++) {
if ($i > 0 && $i % $mod == 0)
echo "</tr><tr>";
$img = "<img src='$board_skin_path/img/noimage.gif' border=0 width='" . $board['bo_1'] . "' title='이미지 없음'>";
$file = $data_path .'/'. $list[$i]['file'][0]['file'];
if (preg_match("/\.(jp[e]?g|gif|png)$/i", $list[$i]['file'][0]['file']) && file_exists($file)){
$thumb = $thumb_path.'/' . $list[$i]['file'][0]['file'];
if (!file_exists($thumb)) {
$size = getimagesize($file);
if ($size[2] == 1)
$src = imagecreatefromgif($file);
else if ($size[2] == 2)
$src = imagecreatefromjpeg($file);
else if ($size[2] == 3)
$src = imagecreatefrompng($file);
else
break;
//가로,세로 최대사이즈 제한, Daeng`2님 팁
if ($size[0] >= $size[1]) {
$rate = $board[bo_1] / $size[0];
$width = $board[bo_1];
$height = (int)($size[1] * $rate);
}
else {
$rate = $board[bo_1] / $size[1];
$width = (int)($size[0] * $rate);
$height = $board[bo_1];
}
$dst = imagecreatetruecolor($width, $height);
imagecopyresampled($dst, $src, 0, 0, 0, 0, $width, $height, $size[0], $size[1]);
imagepng($dst, $thumb, $board['bo_2']);
chmod($thumb, 0707);
/* //원본-가로기준 세로는 비율대로 반영
$rate = $board['bo_1'] / $size[0];
$height = (int)($size[1] * $rate);
$dst = imagecreatetruecolor($board['bo_1'], $height);
imagecopyresampled($dst, $src, 0, 0, 0, 0, $board['bo_1'], $height, $size[0], $size[1]);
imagepng($dst, $thumb, $board['bo_2']);
chmod($thumb, 0707);
*/
}
if (file_exists($thumb))
$img = "<img src='$thumb' border='0' title='" . $list[$i]['file'][0]['source'] . " Hit: " . $list[$i]['wr_hit'] . "'>";
}
$style = "";
if ($list[$i]['icon_new'])
$style = " style='font-weight:bold;' ";
$subject = "<span $style>" . cut_str($list[$i]['subject'], 14) . "</span>";
$comment_cnt = "";
if ($list[$i]['comment_cnt'])
$comment_cnt = "<a href=\"{$list[$i][comment_href]}\"><span style='font-size:7pt;'>{$list[$i][comment_cnt]}</span></a>";
echo "<td width='{$td_width}%' valign=bottom style='word-break:break-all;'>";
echo "<table width=100%>";
echo "<tr><td height=5></td></tr>";
echo "<tr><td align=center><a href='$file' rel='lightbox'>$img</a></td></tr>";//라이트박스 적용
echo "<tr><td align=center><a href='{$list[$i][href]}'>$subject</a>{$comment_cnt}</td></tr>";
if ($is_category) echo "<tr><td align=center><a href='{$list[$i][ca_name_href]}'><font color=#CCCCCC>[{$list[$i][ca_name]}]</a>{$list[$i][datetime2]}</font></td></tr>";
if ($is_checkbox) echo "<tr><td align=center><input type=checkbox name=chk_wr_id[] value='{$list[$i][wr_id]}'></td></tr>";
echo "<tr><td height=5></td></tr>";
echo "</table></td>\n";
}
아마도 위 소스 보다는 스크립트의
self._imgs = new Array();
아래에서 이미지를 뽑아야 하는데....그부분이 꼭 절대 경로를 필요로 하는지는....ㅠ.ㅠ
스크립트를 리스트스킨에 넣고 처리하면 어떤가요?....
위 소스만 보아서는 알수가 없네요...ㅠ.ㅠ
또한 팁에 자료실 소스를 다운 받았어도 사용할 줄을 몰라서.......
일단 머리 좀 식히도 다시 한번 들여다 보아야 겠습니다.
self._imgs = new Array();
아래에서 이미지를 뽑아야 하는데....그부분이 꼭 절대 경로를 필요로 하는지는....ㅠ.ㅠ
스크립트를 리스트스킨에 넣고 처리하면 어떤가요?....
위 소스만 보아서는 알수가 없네요...ㅠ.ㅠ
또한 팁에 자료실 소스를 다운 받았어도 사용할 줄을 몰라서.......
일단 머리 좀 식히도 다시 한번 들여다 보아야 겠습니다.
갖은 방법을 동원해봐도 잘 안됩니다.
새창도 필요없고 그저 링크역할만 하면서 경로가 보이지않는 스크립트면 될텐데,,
어떤 슬라이드 스크립트의 경우 <body onload="***">을 넣어라해서 head.sub.php에 넣었더니 최근게시물에서 에러나고 등등,,
자바 스크립트 백지상태다 보니 그저 뚫어저라 처다보기만 하고있습니다.
에고 잠이 부족해서 횡설수설입니다.
아무튼 해당 스킨에서만 쓰려고 팁에 나와있는것처럼 원본수정은 하지않았습니다.
단지 js 스크립트 붙여넣고 링크에 rel='lightbox' 추가후 필요없는 이미지버튼관련 펑션을 제거한것 뿐입니다.
이 언저리 어디에 힌트가 있나요?
LightBox.prototype = {
_init : function(option)
{
var self = this;
var d = document;
if (!d.getElementsByTagName) return;
var links = d.getElementsByTagName("a");
for (var i=0;i<links.length;i++) {
var anchor = links[i];
var num = self._imgs.length;
if (!anchor.getAttribute("href")
|| anchor.getAttribute("rel") != "lightbox") continue;
// initialize item
self._imgs[num] = {src:anchor.getAttribute("href"),w:-1,h:-1,title:''};
if (anchor.getAttribute("title"))
self._imgs[num].title = anchor.getAttribute("title");
else if (anchor.firstChild && anchor.firstChild.getAttribute && anchor.firstChild.getAttribute("title"))
self._imgs[num].title = anchor.firstChild.getAttribute("title");
anchor.onclick = self._genOpener(num); // set closure to onclick event
}
var body = d.getElementsByTagName("body")[0];
self._wrap = self._createWrapOn(body,option.loadingimg);
self._box = self._createBoxOn(body,option);
return self;
},
집중도 잘안되는데 검색모드로 삽질 전환합니다.^^
좋은하루 되세요!
새창도 필요없고 그저 링크역할만 하면서 경로가 보이지않는 스크립트면 될텐데,,
어떤 슬라이드 스크립트의 경우 <body onload="***">을 넣어라해서 head.sub.php에 넣었더니 최근게시물에서 에러나고 등등,,
자바 스크립트 백지상태다 보니 그저 뚫어저라 처다보기만 하고있습니다.
에고 잠이 부족해서 횡설수설입니다.
아무튼 해당 스킨에서만 쓰려고 팁에 나와있는것처럼 원본수정은 하지않았습니다.
단지 js 스크립트 붙여넣고 링크에 rel='lightbox' 추가후 필요없는 이미지버튼관련 펑션을 제거한것 뿐입니다.
이 언저리 어디에 힌트가 있나요?
LightBox.prototype = {
_init : function(option)
{
var self = this;
var d = document;
if (!d.getElementsByTagName) return;
var links = d.getElementsByTagName("a");
for (var i=0;i<links.length;i++) {
var anchor = links[i];
var num = self._imgs.length;
if (!anchor.getAttribute("href")
|| anchor.getAttribute("rel") != "lightbox") continue;
// initialize item
self._imgs[num] = {src:anchor.getAttribute("href"),w:-1,h:-1,title:''};
if (anchor.getAttribute("title"))
self._imgs[num].title = anchor.getAttribute("title");
else if (anchor.firstChild && anchor.firstChild.getAttribute && anchor.firstChild.getAttribute("title"))
self._imgs[num].title = anchor.firstChild.getAttribute("title");
anchor.onclick = self._genOpener(num); // set closure to onclick event
}
var body = d.getElementsByTagName("body")[0];
self._wrap = self._createWrapOn(body,option.loadingimg);
self._box = self._createBoxOn(body,option);
return self;
},
집중도 잘안되는데 검색모드로 삽질 전환합니다.^^
좋은하루 되세요!