티스토리에 fancybox 갤러리 적용하기

 

티스토리에 fancybox 갤러리 적용하기

 

 

순차적으로 진행하다보니 fancybox 적용하기가 벌써 세번째 글이 되어 버렸네요

이번에는 이해하기에는 조금 복잡할지도 모르겠지만 티스토리 글에 모두 등록된 이미지들을 모두 한번에 갤러리 형식으로 보여주는 기능을 적용해 보겠습니다. 

1. HTML 변경

기존에 등록햇던 <script></script> 부분을 아래 코드로 변경해줍니다.

간단하게 아래코드는 모든 이미지들을 가져와서 순서를 약간 fancybox 로 변경해서 보여주는 코드입니다.

<script>

$(document).ready(function(){

var imgs = [], index = 1;

$(".imageblock").each( function(){

var img = $(this).find('img');

var newImg = $("<img src='" + img.attr('src') + "' title='" + img.attr('alt') + "'>");

imgs.push( newImg);

img.wrap("<a class='fancybox' href='#'/>").closest("a")

.on("click", function( event){

event.stopPropagation();

event.preventDefault();

var thisImg = $(this).find('img');

var thisSrc = thisImg.attr('src');

// adjust imgs index

var adjustImgs = [];

var restImgs = [];

var pushImg = false;

for( var i = 0 ; i < imgs.length ; i++){

if( $(imgs[i]).attr('src') == thisSrc || pushImg){

adjustImgs.push( imgs[i]);

pushImg = true;

}else{

restImgs.push(imgs[i]);

}

}

for( var i = 0; i < restImgs.length; i++){

adjustImgs.push( restImgs[i]);

}

$.fancybox.open( adjustImgs);

});

});

});

</script>

2. CSS 추가

티스토리에 background transparent 가 적용되지 않아 css 를 조금 수정해야 깔끔하게 갤러리를 보여줄 수 있습니다.

아래 코드는 CSS 부분에 추가해 주시면 됩니다.

.fancybox-nav{

 opacity : 0;

}

3. 테스트

본인의 글에서 한번씩 테스트 해보세요

끝.