그누보드5.3 라이트박스2 사용하기
라이트박스2 공식 홈페이지
https://lokeshdhakar.com/projects/lightbox2/
1. 라이트박스2를 다운받습니다.
https://github.com/lokesh/lightbox2/archive/master.zip
압축을 풀고, dist/css/lightbox.css 를 gnuboard5/theme/[테마명]/css 로 복사합니다.
dist/js/lightbox.js 를 gnuboard5/theme/[테마명]/js 로 복사합니다.
dist/images/close.png, loading.gif, next.png, prev.png 를 gnuboard5/theme/[테마명]/img/lightbox2 로 복사합니다.
2. lightbox.css 를 열고
background: url(../images/prev.png) left 48% no-repeat; 를
background: url(../img/lightbox2/prev.png) left 48% no-repeat; 로 수정합니다.
close.png, loading.gif, next.png 도 마찬가지로 경로를 수정합니다.
3. gnuboard5/theme/[테마명]/head.sub.php 를 열고 <head>안에 아래 두줄을 추가합니다.
<link rel="stylesheet" href="<?php echo G5_THEME_CSS_URL; ?>/lightbox.css">
<script src="<?php echo G5_THEME_JS_URL ?>/lightbox.js"></script>
4. gnuboard5/theme/[테마명]/skin/board/[게시판스킨이름]/view.skin.php 아래의
<script> 안에 아래 코드를 추가합니다.
/* Lightbox2 */
var imageCount = $('#bo_v_con img').length -1;
for (var i = 0; i <= imageCount; i++) {
var srcTotal = $('#bo_v_con img').eq(i).attr('src');
$('#bo_v_con img').eq(i).wrap('<a href="' + srcTotal + '" />');
}
$("#bo_v_con a:has('img')").attr('data-lightbox', 'lightbox2gallery');
5. view.skin.php 에서 필요없는 자바스크립트를 주석 처리합니다.
<!-- <script src="<?php // echo G5_JS_URL; ?>/viewimageresize.js"></script> -->
// 이미지 리사이즈
// $("#bo_v_atc").viewimageresize();
6. 모든 파일을 업로드하고 잘되는지 확인합니다.
* 기타 자잘한 옵션은 라이트박스2 공홈의 Options 를 참고 바랍니다.
댓글 3개