그누보드5.3 라이트박스2 사용하기 > 그누보드5 팁자료실

그누보드5 팁자료실

그누보드5.3 라이트박스2 사용하기 정보

그누보드5.3 라이트박스2 사용하기

첨부파일

lightbox2-master.zip (224.6K) 45회 다운로드 2019-06-12 14:37:58

본문

라이트박스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. 모든 파일을 업로드하고 잘되는지 확인합니다.

 

461161156_1560318278.1178.png

 

* 기타 자잘한 옵션은 라이트박스2 공홈의 Options 를 참고 바랍니다.

https://lokeshdhakar.com/projects/lightbox2/#options

추천
6
  • 복사

댓글 3개

© SIRSOFT
현재 페이지 제일 처음으로