그누에 lightbox 적용하기 정보
그누에 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 레이어로 이미지 표시
간단하죠? 게시판의 내용 보기에만 적용한 겁니다.
전 갤러리에도 적용했는데 엄청 이쁘답니다. 이외에도 활용방법은 무궁무진 할듯 합니다.
========================
수정 : 첨부파일을 이용해 사용해 보세요.
추천
1
1
댓글 13개

재미있는 팁이군요...^^
왠지 ... 쓸모가 많을것 같은 ... ^^
올려주셔서 감사합니다....
왠지 ... 쓸모가 많을것 같은 ... ^^
올려주셔서 감사합니다....
아 그리구 한가지 빠뜨린게 있는데 사이트에 플래쉬 메뉴등을 사용할 경우 레이어가 플래쉬에 가리는 경우가 있습니다. 이럴땐 플래쉬 object 태그에 아래와 같이 한줄 추가하세요.
<object......>
<param name="wmode" value="transparent"> <!-- 요거 한줄 추가하심 됩니다 -->
<embed......></embed></object>
<object......>
<param name="wmode" value="transparent"> <!-- 요거 한줄 추가하심 됩니다 -->
<embed......></embed></object>
제 익스 셋팅이 이상해서 인지 전 일반적인형태와 동일하군요..
뭐가 뭔지 모르겠는 ^^;;
어떻게 나와야 정상인거죠?
뭐가 뭔지 모르겠는 ^^;;
어떻게 나와야 정상인거죠?
다음 갤러리를 참고하세요.
http://www.7edge.net/index.php/gallery/
http://www.7edge.net/index.php/gallery/
폴더를 /lightbox_plus 에 넣고 했을 때
그누에서 이미지 경로를 어떻게 설정해야 하는가요?
전체경로를 쓰기는 좀 그렇고...
일단
// === 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'
});
});
이렇게 사용하고 있거든요.
그누에서 이미지 경로를 어떻게 설정해야 하는가요?
전체경로를 쓰기는 좀 그렇고...
일단
// === 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='' 만 걸어주시면 될 듯 합니다.
썸네일이미지에 원래이미지를 링크를 걸고 rel='lightbox', alt='', title='' 만 걸어주시면 될 듯 합니다.
정말좋은팁이네요. 소개해주신 shinwha님께 감사드립니다.
그누에 lightbox 적용하기

근데 이걸 적용하고싶은 특정 스킨에만 선택적으로 적용시킬수있는건가요?
원본을 손대지 않고 특정 게시판의 목록에서 볼 수 있도록 list.skin.php에서 아래처럼 사용하고 있습니다.
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>";//
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>";//
재미있고 화려한 팁이네요.

굿 잡~!