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

그누보드5 팁자료실

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

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

첨부파일

첨부파일 lightbox2-master.zip (224.6K) 10회 다운로드 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. 모든 파일을 업로드하고 잘되는지 확인합니다.

 

461161156_1560318278.1178.png

 

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

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

추천5

댓글 전체

전체 1,485 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

진행중 포인트경매

  1. 대륙 건프라 MG 'HIRM Barbatos'

    참여19 회 시작19.09.11 17:20 종료19.09.16 17:20
  2. 마크다운 에디터-뷰어

    참여20 회 시작19.09.09 10:54 종료19.09.16 10:54

(주)에스아이알소프트 (06253) 서울특별시 강남구 도곡로1길 14, 6층 624호 (역삼동, 삼일프라자) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT