티스토리(Tistory) 블로그 원본 사진 이미지 보기

오늘은 티스토리 블로그의 사진 이미지를 클릭하면 원본 사진 이미지 볼 수 있도록 만들어 보려고 합니다.

티스토리에 큰 사진을 올렸는데 사진을 클릭하면 원본 크기가 아닌 아래처럼 슬라이드 쇼 이미지만 보이시죠?

아래 스크린샷처럼 말이죠.

블로그의 사진을 클릭하는 사람들은 어떤 생각으로 사진을 클릭할까요?

제 경우에는 원본이미지를 보려고 사진을 클릭하거든요.. 대부분이 그렇게 생각하지 않을까요? 

슬라이드 쇼를 보려고 사진을 클릭하시는 분도 있을지 모르지만...저는 원본이미지를 보고 싶고 또 그렇게 만들려고 합니다.

우선 아래 예제 사진들을 클릭해 보세요.

[해상도 450 x 253 이미지]

[해상도 850 x 478 이미지]

[해상도 5312 x 2988 이미지]

제 블로그 컨텐츠 가로폭인 850 픽셀 해상도보다 낮거나 같은 이미지는 슬라이드쇼로 봐도 무관합니다만,

가로폭이 850 픽셀 보다 큰 이미지는 원본 사이즈로 보고 싶은것입니다.

사진들을 클릭하시면 아시겠지만 바탕화면보다 작은 이미지들은 사진 크기에 맞게 새창이 뜨고

바탕화면 해상도 보다 큰 이미지는 바탕화면 해상도 크기의 창에 맞게 사진이 열립니다.

또 해상도가 큰 이미지를 클릭하면 원본 사이즈의 사진을 확대해서 볼 수 있습니다.

이제 이렇게 세팅해볼까요? 아래 순서대로 따라해 보세요.

우선, 슬라이드 쇼로 보여지는 플러그인 티스토리 플러그인중에 Light TT EX (이미지 크게보기) 플러그인을 해제해야 됩니다.

1. 아래 이미지처럼 [관리] -> [플러그인] -> [플러그인 설정] -> [Light TT EX (이미지 크게보기)] 을 클릭하셔서 [설정해지]하세요.

2. 아래 압축파일을 다운로드 받으세요.

popimage.zip

3. 압축파일을 압축 해제 하시면 icon.png /jquery.zoom.js / popimage.html 이렇게 3개의 파일이 있는데, 이 3 개의 파일을 [관리] -> [꾸미기] -> [HTML/CSS 편집] -> [파일업로드 탭] 에 [+추가] 하세요.

4. [관리] -> [꾸미기] -> [HTML/CSS 편집] -> [HTML탭] 에서 </head>앞에 아래 코드를 삽입하세요.

<script type="text/javascript">
$(function(){
  $(".imageblock img").attr("onclick", "").unbind("click");
  $(".imageblock img").css("cursor","pointer").bind("click",
    function(){
      var imgsrc = $(this).attr("src").replace(/\/image\//g,"/original/");
      var screenWidth = screen.availWidth;
      var screenHeight = screen.availHeight;
      var popImgViewer = window.open("./images/popimage.html?tmp="+new Date().getTime()+"&src="+imgsrc,"tomotoWindow","top="+(screenHeight-500)/2+",left="+(screenWidth-800)/2+",width=800,height=500,scrollbars=1,resizable=0");
    }
  );
});
</script>

이제 모든 설치는 끝났습니다. 블로그에 가셔서 이미지를 클릭해 보세요.

제 티스토리 블로그처럼 원본 이미지를 새창으로 볼 수 있습니다. ^^

해당 자바스크립트는 다음 포스트에 상세하게 설명드리겠습니다.

공감과 댓글은 글을 올리는데 큰 힘이 됩니다.

감사합니다. ^^