KCP 창업 지원, 수수료 국내최저 2.9% 제공 이벤트!

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

그누보드5
영카트5
스터디
Q & A
제작의뢰
컨텐츠몰
부가서비스
소모임
커뮤니티
부가서비스
KCP 이벤트!

그누보드5 팁자료실

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

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

첨부파일

첨부파일 lightbox2-master.zip (224.6K) 17회 다운로드 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

댓글 전체

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

회원로그인

진행중 포인트경매

  1. 참여38 회 시작20.10.16 07:30 종료20.10.22 19:41
  2. 참여18 회 시작20.10.15 12:15 종료20.10.22 12:15
  3. 참여1 회 시작20.10.14 12:40 종료20.10.21 12:40
  4. 참여2 회 시작20.10.14 12:33 종료20.10.21 12:33

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

© SIRSOFT