[수정] Jquery를 이용한 티스토리 이미지 리사이징

※ 바로 전 테그의 경우 여러 이미지를 사용 할 경우 문제가 발생하여 수정 하였습니다.

 

 

 

기존에 사용하던 이미지 리사이징이 자꾸 본문을 넘어가서 새로 Jquery를 이용하여 만들었습니다.

 

소스는 아래와 같습니다.

 

<script type="text/javascript"> $('img').load( function(){ var imgblock_width=($('#content').width() * 0.95); var img_width=(imgblock_width * 0.95); $('#content span.imageblock').css('max-width',imgblock_width).css('height','auto'); $('#content span.imageblock img').css('max-width',img_width).css('height','auto'); }); </script>

 

 

 

위의 내용을 복사 후 Tistory의 스킨 편집기중 HTML 편집기 부분에서 </BODY> 위에 삽입 합니다.

 

 

삽입시 다른 스크립트에 방해 되지 않도록 주의 하세요.

 

 

스크립트를 살펴 보겠습니다.

 

$('img').load( function(){

 

위의 스크립트는 이미지가 모두 열리면 실행한다는 내용입니다.

 

 

var imgblock_width=($('#content').width() * 0.95);
var img_width=(imgblock_width * 0.95);

 

이미지의 imageblock 박스의 크기와 img 크기를 구합니다.

 

imageblock의 크기는 본문 전체 크기의 95% img 태그의 그기는 imageblock 박스의 크기의 95%로 지정합니다.

 

 

$('#content span.imageblock').css('max-width',imgblock_width).css('height','auto');

 

ID="content" 속성 내부의 class="imageblock" 속성이 있는 span 태그를 찾아 CSS 값을 변경한다는 것입니다.

 

max-width CSS 속성을 imgblock_width 값으로 설정하여 최대 크기가 본문 키기의 95%를 넘길 수 없습니다.

 

95%의 기준은 .entry 즉 본문의 margin (내부 여백) 등을 고려하여 설정한 값입니다.

 

 

$('#content span.imageblock img').css('max-width',img_width).css('height','auto');

 

이 부분은 실제 img 태그의 CSS 값을 바꾸는 것입니다.

 

실제 이미지가 본문 이외에 많이 사용 되므로 본문 이외의 이미지 태그에는 간섭하지 않도록 "#content span.imageblock img" 로 설정 하였습니다.

 

img_width는 imgblock_width의 95% 이므로 결국 전체 크기의 95%의 95%가 되는 것입니다.

 

 

감사합니다.