티스토리에 이미지 플러그인 LIghtbox, fancybox 적용하기

디자인/ 티스토리 꾸미기 2013. 8. 21. 16:05
티스토리에 fancybox 적용하기

 

fancybox 는 이미지 관련한 jQuery 플러그인입니다. Lightbox 라고도 하죠 이미지를 클릭했을때 아래와 같은 기능을 합니다.

 

 

그리고 티스토리에 빌트인으로 들어있는 Lightbox 플러그인을 대체합니다.

 

 

1. 파일 다운로드

http://fancyapps.com/fancybox/#examples

위 사이트에서 fancybox 를 다운로드 받습니다.

적당한 곳에 압축을 풀어주신후 몇몇 파일을 티스토리로 업로드 해야 합니다.

 

 

2. 파일 업로드

 

압축을 푼곳에 보면 source 폴더가 있습니다.

그 폴더 안에 있는 파일중 아래 파일을 업로드 합니다.

blank.gif

fancybox_loading.gif

fancybox_loading@2x.gif

fancybox_overlay.png

fancybox_sprite.png

fancybox_sprite@2x.png

jquery.fancybox.css

jquery.fancybox.pack.js

 

 

fancybox 관련 업로드된 파일 목록

 

 

 

3. HTML 수정

 

<head> 테그 안에 아래의 내용을 추가 합니다.

<!------------------------ fancybox start ----------------------------->
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="./images/jquery.fancybox.pack.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="./images/jquery.fancybox.css?v=2.1.5" media="screen" />
<script>
$(document).ready(function(){
 $(".imageblock").each( function(){
  var img = $(this).find('img');
  $(img).wrap("<a class='fancybox' href='#'/>").closest("a")
  .on("click", function( event){
      event.stopPropagation();
   event.preventDefault();
   $.fancybox.open( $(this).html());
  });
 });
});
</script>
<!------------------------ fancybox end ----------------------------->

 

 

fafncybox 관련 HTML 추가된 부분

 

 

4. 테스트

 

이미지가 등록된 아무 페이지에서 테스트 해보시면 됩니다.

 

※ 주의 : 기존 빌트인 Lightbox 플러그인을 사용해제 하시면 안됩니다. 반드시 사용 설정이 되어 있어야 합니다.

설정을 해제해 봤는데 Lightbox 를 사용하지 않을때는 이미지 사이즈에 따라 내부적으로 태그를 다르게 생성하더라구요 이미지가 클 경우에 임의로 onclick 이벤트를 추가하기 때문에 조금 골치 아프더라구요... 그래서 기존 Lightbox 플러그인을 사용한 상태에서 작업을 진행하셔야 합니다.

 

몇 시간동안 고생했는데 적어놓으니 간단하네요...

 

 

: