그누보드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. 모든 파일을 업로드하고 잘되는지 확인합니다.

 

461161156_1560318278.1178.png

 

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

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

첨부파일

lightbox2-master.zip (224.6 KB) 48회 2019-06-12 14:37
|

댓글 3개

감사합니다.
감사합니다.
감사합니다.
댓글을 작성하시려면 로그인이 필요합니다.

그누보드5 팁자료실

+
제목 글쓴이 날짜 조회
6년 전 조회 5,330
6년 전 조회 5,627
6년 전 조회 4,566
6년 전 조회 5,548
6년 전 조회 3,692
6년 전 조회 4,291
6년 전 조회 4,860
6년 전 조회 8,087
6년 전 조회 1.2만
6년 전 조회 4,281
6년 전 조회 6,305
6년 전 조회 6,354
6년 전 조회 9,637
6년 전 조회 6,099
6년 전 조회 5,371
6년 전 조회 5,731
6년 전 조회 3,961
6년 전 조회 3,427
6년 전 조회 5,167
6년 전 조회 5,153
6년 전 조회 5,167
6년 전 조회 5,702
6년 전 조회 4,411
6년 전 조회 7,612
6년 전 조회 6,524
6년 전 조회 5,047
6년 전 조회 8,925
6년 전 조회 8,665
6년 전 조회 6,209
6년 전 조회 6,600