그누에 lightbox 적용하기 > 그누4 팁자료실

그누4 팁자료실

그누보드4와 관련된 팁을 여러분들과 함께 공유하세요.
나누면 즐거움이 커집니다.

그누에 lightbox 적용하기 정보

그누에 lightbox 적용하기

첨부파일

lightbox_plus.zip (6.9K) 170회 다운로드 2006-01-28 20:32:56

본문

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 레이어로 이미지 표시

간단하죠? 게시판의 내용 보기에만 적용한 겁니다.

전 갤러리에도 적용했는데 엄청 이쁘답니다. 이외에도 활용방법은 무궁무진 할듯 합니다.

========================
수정 : 첨부파일을 이용해 사용해 보세요.
추천
1

댓글 13개

아 그리구 한가지 빠뜨린게 있는데 사이트에 플래쉬 메뉴등을 사용할 경우 레이어가 플래쉬에 가리는 경우가 있습니다. 이럴땐 플래쉬 object 태그에 아래와 같이 한줄 추가하세요.

<object......>
<param name="wmode" value="transparent"> <!-- 요거 한줄 추가하심 됩니다 -->
<embed......></embed></object>
폴더를  /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'
});
});


이렇게 사용하고 있거든요.
안녕하세요 다름이 아니라 이런팀은 기존에 그누보드 갤러리보드를 설치 후에 수정해주는건가요?
또, 제가 갤러리 게시판에 올린사진도 이런식으로 보여줄수 있는건가요?
너무궁금합니다. 초짜라서 참...여튼 답변해주세요~~
그누 갤러리를 사용을 안해봐서 모르겠지만
썸네일이미지에 원래이미지를 링크를 걸고 rel='lightbox', alt='', title='' 만 걸어주시면 될 듯 합니다.
원본을 손대지 않고 특정 게시판의 목록에서 볼 수 있도록 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>";//
전체 3,309 |RSS
그누4 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1402호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT