이미지 리사이즈 jQuery 로 변경 방법 총정리 > 개발자팁

개발자팁

개발과 관련된 유용한 정보를 공유하세요.
질문은 QA에서 해주시기 바랍니다.

이미지 리사이즈 jQuery 로 변경 방법 총정리 정보

jQuery 이미지 리사이즈 jQuery 로 변경 방법 총정리

본문

[수정할 파일]
view.php
common.lib.php
board.js
각스킨별 view.skin.php

1. view.php 파일 114줄 쯤 아래와 같은 소스가 있습니다.
$view[content] = preg_replace("/(\<img )([^\>]*)(\>)/i", "\\1 name='target_resize_image[]' onclick='image_window(this)' style='cursor:pointer;' \\2 \\3", $view[content]);
이 소스를 주석처리 해주세요.
//$view[content] = preg_replace("/(\<img )([^\>]*)(\>)/i", "\\1 name='target_resize_image[]' onclick='image_window(this)' style='cursor:pointer;' \\2 \\3", $view[content]);

2. common.lib.php 파일 904줄 아래로 아래와 같은 소스가 있습니다.
return "<img src='$g4[path]/data/file/$board[bo_table]/".urlencode($file)."' name='target_resize_image[]' onclick='image_window(this);' style='cursor:pointer;' title='$content'>";
이소스를 아래와 같이 수정해주세요.
return "<img src='$g4[path]/data/file/$board[bo_table]/".urlencode($file)."' title='$content'>";

3. board.js 파일에 아래 소스 추가 합니다.
jQuery.resimg = function(element, options){
    var setting = { imageWidth:false, minusSize:30, borderColor:false }
    $.extend(setting, options); 

    var imageWidth = setting.imageWidth;
    var borderColor = setting.borderColor;
 var minusSize = setting.minusSize;
 
 if(!imageWidth){
  // 이미지가 로딩되면 부모의 사이즈도 변경됨으로 잠시 띄운다.
  $(element).css("position", "absolute");
  // 이미지 교정 값이 없다면 부모의 폭 크기를 구한다 이때 페딩값을 제외 한다.
  var pw = $(element).parent().innerWidth();
  var plp = parseInt($(element).parent().css("padding-left").replace("px", ""));
  var prp = parseInt($(element).parent().css("padding-right").replace("px", ""));
  var tp = plp + prp;
  // 줄어들 사이즈 보다 페딩값이 크거나 같다면 줄어들 사이즈를 페딩값으로 교정하여 엘리먼트가 트러지는것을 방지한다.
  if(minusSize <= tp) minusSize = tp;
  // 이미지 사이즈를 엘리먼트 사이즈에서 minusSize 값을 뺀값
  imageWidth = pw - minusSize;
  $(element).css("position", "");
 }
 
 // 엘리먼트의 자식중 img 를 선택한다.
 var element = element + " img";
 //alert($(element).parent().children().get().length);
    $(element).each(function(){
  var img_width = $(this).outerWidth();
     var img_height = $(this).outerHeight(); 

  //원래 사이즈를 저장한다.
     //$(this).attr("tmp_width", img_width);
     //$(this).attr("tmp_height", img_height);
  var i = $(element).index($(this));
  $(element)[i].tmp_width = img_width;
     $(element)[i].tmp_height = img_height;
 
     // 이미지 폭이 테이블 폭보다 크다면 테이블폭에 맞춘다
     if(img_width > imageWidth) {
         imageHeight = parseFloat(img_width/ img_height);
         $(this).width(imageWidth).height(parseInt(imageWidth / imageHeight)).css("cursor", "pointer");
   //$(this).width(imageWidth).css("cursor", "pointer");
     }
 
     if (borderColor) $(this).css({ "border" : "1px solid "+ borderColor });
 }).click(function(){
  image_window(this);
 });
}

4. 스킨별 view.skin.php 파일의 내용과 파일을 불러주는 부분을 div 테그로 막아줍니다.
<div id="resimages">
  <?
        // 파일 출력
        for ($i=0; $i<=count($view[file]); $i++) {
            if ($view[file][$i][view])
                echo $view[file][$i][view] . "<p>";
        }
        ?>

        <!-- 내용 출력 -->
        <span id="writeContents"><?=$view[content];?></span>
</div>

5. 스킨별 view.skin.php 에서 최하단에 아래와 같은 방법으로 수정합니다.
<script language="JavaScript" src="<?=$g4[path]?>/js/jquery-latest.js"></script>// jQuery 임포트.
<script language="JavaScript" src="<?="$g4[path]/js/board.js"?>"></script>
<script language="JavaScript">
$(document).ready(function(){
  $.resimg("div#resimages");
 //resizeBoardImage(<?=(int)$board[bo_image_width]?>);
    drawFont();
});
</script>
$.resimg("div#resimages");
는 테이블 사이즈에 맞게 조절하라는 의미 입니다. 

$.resimg("div#resimages", {imageWidth:<?=(int)$board[bo_image_width]?>});
는 보드 설정 값에 따라 크기를 조절합니다.

$.resimg("div#resimages", {minusSize:20});
는 테이블 크기보다 20픽셀 줄입니다. 이때 페팅값이 20픽셀보다 크면 페딩값에 맞추어 줄입니다.

그외 옵션으로 borderColor 가 있습니다.
borderColor 는 이미지에 1픽셀의 테두리를 주며 그 색상을 지정합니다.
[이 게시물은 관리자님에 의해 2011-10-31 16:55:28 jQuery에서 이동 됨]
추천
11
  • 복사

댓글 5개

10번 추천을 못 눌르는게 미안합니다. ㅠ..ㅠ...
board.js 파일의 모든 것을 jQuery로 바꿀려고 보다가 gblog 작업 때문에 미뤘는데
다 끝내버리셨네요. jQuery의 대가가 되신거 같아요.
그누도 제로처럼 jQuery Transfer를 해야하는데 쉽지가 않은거 같아요.
drawFont() 함수까지 해서 board.js를 싹~ jQuery로 바꿀 수는 없을까요? (욕심만 늘어갑니다)
올려주신 코드는 테스트해보구 추가로 feedback 하겠습니다.
조금 보완하면 jQuery plugin 등록하셔도 될 것 같아요.
위 소스로 바꾸어 보았는데 이미지가 리사이즈가 되지 않네요..

$.resimg("div#resimages");
는 테이블 사이즈에 맞게 조절하라는 의미 입니다.

$.resimg("div#resimages", {imageWidth:<?=(int)$board[bo_image_width]?>});
는 보드 설정 값에 따라 크기를 조절합니다.

$.resimg("div#resimages", {minusSize:20});
는 테이블 크기보다 20픽셀 줄입니다. 이때 페팅값이 20픽셀보다 크면 페딩값에 맞추어 줄입니다.

- 리사이징이 안됩니다 -

리사이징 기능??

감사합니다.
© SIRSOFT
현재 페이지 제일 처음으로