티스토리 본문 이미지 팝업 확대시키는 방법(일)2019-06-16

티스토리 본문 이미지 팝업 확대시키는 방법

(일)2019-06-16

위의 사진을 클릭하면 원본 해상도크기의 팝업이 나옵니다.

티스토리 블로그에 사진이나 이미지가 

작게 보일 경우가 있습니다. 사진 사이즈를

크게 볼수 가 없는데 팝업이 되었으면

하는 경우가 종종 있는데 이럴 때

유용한 팁이 있어 포스팅 합니다.

이미지를 팝업시켜 새창에서 볼 경우

작은 이미지들은 원래 사진 크기에 맞게

뜨는데 해상도 크기에 따라 사진이 

열린다고 생각하면 됩니다. 

1.  티스토리 플러그인에 들어가서

Light TT EX(이미지크게보기)를 

해제합니다.  사용중 --> 설정해지

2.  아래의 파일을 다운받아서 

압축을 해제하면 3개의 파일이

나오는데 이 파일을 스킨편집으로

들어가서 HTML/CSS/파일업로드

화면에서 파일 업로드에 3개의

파일을 업로드 하시면 됩니다.

↓

popimage.zip

3.  업로드가 끝났으면 아래의 HTML

코드를 HTML탭에서 입력합니다.

(입력은 head와 /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>







입력후  적용->새로고침을 한 뒤


다시 글 목록에서 선택하여 들어간 뒤

이미지를 클릭하면 사진이나 이미지가

원본 이미지처럼 새창에서 확대되어

나오는 것을 확인할 수 있다.




유용하다고 생각되시면 공감을 눌러주세요~