티스토리 Fancybox 갤러리에 썸네일 이미지 사용하기

이전 포스팅까지 티스토리에 fancybox 를 적용하기를 순차적으로 진행했는데

이번에는 갤러리 이미지 하단에 썸네일을 추가해 보도록 하겠습니다.

아래 이미지의 테두리 처진부분이 썸네일 이미지 네비게이션입니다. 원하는 이미지로 바로 이동이 가능합니다.

 

1. 스크립트 수정

우선 약간의 스크립트 수정이 필요한데 일전에 압축을 해제한 위치에 source/helpers 폴더에 있는 jquery.fancybox-thumbs.js 파일을 수정합니다.

if (item.element) {

// href = $(item.element).find("img").attr('src'); 1)

    href = $(item.element[0]).attr('src'); // 2)

}

1) 번 라인을 2) 으로 수정합니다. 수정한 파일입니다. 

jquery.fancybox-thumbs.js

 

2. 파일 업로드

source/helpers 폴더에 jquery.fancybox-thumbs.js, jquery-fancybox-thumbs.css 두개의 파일을 업로드 합니다.

3. HTML 수정

스크립트와 Style 파일을 추가하는 구문을 추가해 줍니다.

<script type="text/javascript" src="./images/jquery.fancybox-thumbs.js?v=1.0.7"></script>

<link rel="stylesheet" type="text/css" href="./images/jquery.fancybox-thumbs.css?v=2.1.5" media="screen" />

그리고 썸네일을 불러오는 코드를 수정합니다.

$.fancybox.open( adjustImgs,

{

helpers : {

        thumbs : {

            width : 75,

            height : 75

        }

    }

});

4. 테스트