게시판, 갤러리 보드에 라이트박스 연동해서 사용하기 > 그누보드5 팁자료실

그누보드5 팁자료실

게시판, 갤러리 보드에 라이트박스 연동해서 사용하기 정보

게시판, 갤러리 보드에 라이트박스 연동해서 사용하기

본문

스킨자료실에 있는 갤러리 스킨 중에 view 페이지에서도 라이트박스를 연동해서 사용하는 스킨이 없어서
어제 오늘에 걸쳐서 삽질을 좀 많이 한 끝에 알아낸 방법으로
에디터로 이미지를 본문에 첨부하였을시 해당 이미지를 클릭하면
라이트박스로 볼수 있는 방법을 알려드리려고 합니다.
(gnuboard5.2.9.5 버전 기준으로 작성되었습니다.)

우선 갤러리 스킨이나 게시판 스킨등 전부 사용가능하며, 제 실력이 아직 미천한 관계로...
보드스킨별로 따로 설정해서 사용하는 방법은 아직 해보질 못했습니다.
그렇기에 모든 보드스킨에서 적용해서 사용하시는 방법 말곤 없습니다.
이 부분 숙지하시고, 진행하시면 되겠습니다.

우선 라이트박스를 다운로드 받아주세요. 아래의 사이트에서 최신버전을 받아주시면 됩니다.
https://github.com/dbrekalo/simpleLightbox/releases

다운 받으셨으면, 압축을 풀고 dist 라는 폴더를 제외하고 전부 삭제 해주시고
dist 폴더안에 있는 js, css 파일들을 simpleLightbox-1.2.9 폴더로 끄집어 냅니다. dist 폴더는 삭제하시고요.
그 다음 그누보드5 설치폴더> plugin 폴더로 업로드 해주세요.

이제 lib/thumbnail.lib.php, skin/board/basic/view.skin.php 파일만 수정해주면 됩니다.

thumbnail.lib.php 파일을 여시면 181줄 쯤에

$thumb_tag = '<a href="'.G5_BBS_URL.'/view_image.php?fn='.urlencode($imgurl).'" target="_blank" class="view_image">'.$thumb_tag.'</a>';
부분을 아래의 코드로 변경해주세요.

$thumb_tag = '<a href="'.G5_URL.$imgurl.'">'.$thumb_tag.'</a>';


그 다음 view.skin.php 파일을 여시고, 151줄 쯤에

<div id="bo_v_con"><?php echo get_view_thumbnail($view['content']); ?></div>
이 부분을

<div class="gallery" id="bo_v_con"><?php echo get_view_thumbnail($view['content']); ?></div>
            <script>
            $('.gallery a').simpleLightbox();
            </script>

이렇게 변경해 주세요.


마지막으로 view.skin.php에 윗부분 viewimageresize 아래쯤에 아래 코드를 추가해 주시면 됩니다.

<script src="<?php echo G5_PLUGIN_URL; ?>/simpleLightbox-1.2.9/simpleLightbox.min.js"></script>
<link rel="stylesheet" href="<?php echo G5_PLUGIN_URL; ?>/simpleLightbox-1.2.9/simpleLightbox.min.css">




이렇게 라이트박스를 연동해서 사용하면, 장점이 많습니다.
에디터로 이미지를 10개든 20개든 첨부하면, 전부 연결이 되서 라이트박스로 볼 수 있습니다.
즉, 여러개의 이미지를 본문 내에 삽입했을 경우에 전부 일일이 클릭할 때 번거로움을 덜어줄 수 있으며
라이트박스에서 자체적으로 리사이징을 해주기 때문에 큰 사이즈의 이미지도 편하게 볼 수 있습니다.

단점으로는 라이트박스를 적용하지 않은 다른 보드스킨을 쓰는 게시판의 경우
기존처럼 새창으로 이미지가 뜨지 않기에 앞서 말한 것처럼 전체를 적용하던가, 아예 안쓰던가 둘중 하나인거 같네요.
thumbnail.lib.php 부분을 수정하는 방법 말고, 단일 스킨에서만 사용하려면, 좀 더 노~오력 이라는게 필요하겠지만
전 일단 이정도만으로도 만족하기에 삽질은 더 안하기로 합니다 ^^

그리고 옵션이나 기타등등 설정하실 분은 위에 github 페이지를 방문해보시면 되며
simpleLightbox.min.css 부분을 수정하면, 화살표의 크기라던지, close 버튼의 크기가 조절 가능합니다.
1줄로 되어 있어 헷갈리실 경우엔 http://jsbeautifier.org/ 이 사이트에서 붙여넣기후 보시면, 훨씬 편합니다.


아 그리고 매번 초보같은 질문마다 답변해주시는 천사별님, 작은별님, sinbi님 플로트님 등등 감사합니다 ^^
추천
4

댓글 13개

해당 스킨에서만 사용하시려면 썸네일 함수를 복사해서 수정하시면 됩니다.
thumbnail.lib.php
function get_view_thumbnail 요 함수를 복사해서
function get_view_thumbnail2 요렇게 이름만 살짝 바꾸고
view.skin.php에서 get_view_thumbnail2 로 바꿔서 처리하시면 됩니다.
전체 2,427 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

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