그누에 lightbox 적용하기
lightbox가 궁금하신 분들은 http://serennz.cool.ne.jp/sb/sp/lightbox/ 를 방문하셔서 이미지를 클릭해 보세요.
적용방법은 간단합니다.
위 링크에서 파일들을 받은 후 서버에 업로드 후, css, js 파일내 이미지 경로만 맟추어 준 후에.
헤더에 다음을 추가.
<link rel="stylesheet" type="text/css" href="lightbox.css" />
<script type="text/javascript" src="lightbox_plus.js"></script>
/lib/common.lib.php의 872줄을
return "<img src='$g4[path]/data/file/$board[bo_table]/".urlencode($file)."' name='target_resize_image[]' onclick='image_window(this);' style='cursor:pointer;' title='$content'>";
아래와 같이 수정합니다.
return "<a href='$g4[path]/data/file/$board[bo_table]/".urlencode($file)."' rel='lightbox'><img src='$g4[path]/data/file/$board[bo_table]/".urlencode($file)."' name='target_resize_image[]' border='0' style='cursor:pointer;' title='$content'></a>"; // 이미지 클릭시 새창으로 뜨지않고 lightbox 레이어로 이미지 표시
간단하죠? 게시판의 내용 보기에만 적용한 겁니다.
전 갤러리에도 적용했는데 엄청 이쁘답니다. 이외에도 활용방법은 무궁무진 할듯 합니다.
========================
수정 : 첨부파일을 이용해 사용해 보세요.
적용방법은 간단합니다.
위 링크에서 파일들을 받은 후 서버에 업로드 후, css, js 파일내 이미지 경로만 맟추어 준 후에.
헤더에 다음을 추가.
<link rel="stylesheet" type="text/css" href="lightbox.css" />
<script type="text/javascript" src="lightbox_plus.js"></script>
/lib/common.lib.php의 872줄을
return "<img src='$g4[path]/data/file/$board[bo_table]/".urlencode($file)."' name='target_resize_image[]' onclick='image_window(this);' style='cursor:pointer;' title='$content'>";
아래와 같이 수정합니다.
return "<a href='$g4[path]/data/file/$board[bo_table]/".urlencode($file)."' rel='lightbox'><img src='$g4[path]/data/file/$board[bo_table]/".urlencode($file)."' name='target_resize_image[]' border='0' style='cursor:pointer;' title='$content'></a>"; // 이미지 클릭시 새창으로 뜨지않고 lightbox 레이어로 이미지 표시
간단하죠? 게시판의 내용 보기에만 적용한 겁니다.
전 갤러리에도 적용했는데 엄청 이쁘답니다. 이외에도 활용방법은 무궁무진 할듯 합니다.
========================
수정 : 첨부파일을 이용해 사용해 보세요.
첨부파일
|
댓글을 작성하시려면 로그인이 필요합니다.
로그인
댓글 13개
왠지 ... 쓸모가 많을것 같은 ... ^^
올려주셔서 감사합니다....
<object......>
<param name="wmode" value="transparent"> <!-- 요거 한줄 추가하심 됩니다 -->
<embed......></embed></object>
뭐가 뭔지 모르겠는 ^^;;
어떻게 나와야 정상인거죠?
http://www.7edge.net/index.php/gallery/
그누에서 이미지 경로를 어떻게 설정해야 하는가요?
전체경로를 쓰기는 좀 그렇고...
일단
// === main ===
addEvent(window,"load",function() {
var lightbox = new LightBox({
loadingimg:'http://doban.or.kr/doban/lightbox_plus/loading.gif',
expandimg:'http://doban.or.kr/doban/lightbox_plus/expand.gif',
shrinkimg:'http://doban.or.kr/doban/lightbox_plus/shrink.gif',
closeimg:'http://doban.or.kr/doban/lightbox_plus/close.gif'
});
});
이렇게 사용하고 있거든요.
또, 제가 갤러리 게시판에 올린사진도 이런식으로 보여줄수 있는건가요?
너무궁금합니다. 초짜라서 참...여튼 답변해주세요~~
썸네일이미지에 원래이미지를 링크를 걸고 rel='lightbox', alt='', title='' 만 걸어주시면 될 듯 합니다.
http://phosay.com/g4/bbs/board.php?bo_table=demo_gallery
//lightbox 사용
echo "<link rel='stylesheet' type='text/css' href='{$board_skin_path}/lightbox_plus/lightbox.css' />";
echo "<script type='text/javascript' src='{$board_skin_path}/lightbox_plus/lightbox_plus.js'></script>";
echo "<tr><td align=center><a href='$data_path .'/'. $list[$i]['file'][0]['file']' rel='lightbox'>$img</a></td></tr>";//