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

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

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

본문

board.js 파일에 아래 항목을 추가 해주세요.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
jQuery.resimg = function(element, options){
var setting = { imageWidth:600, borderColor:false }
$.extend(setting, options);

var imageWidth = setting.imageWidth;
var borderColor = setting.borderColor;

$(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);

// 이미지 폭이 테이블 폭보다 크다면 테이블폭에 맞춘다
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 });
});
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

그리고 view스킨 파일 최하단스크립트를 아래와 같이 수정하세요.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//제이쿼리 임포트
<script language="JavaScript" src="<?="$g4[path]/js/jquery-latest.js"></script>
<script language="JavaScript" src="<?="$g4[path]/js/board.js"?>"></script>
<script language="JavaScript">
$(document).ready(function(){
$.resimg("img[name='target_resize_image[]']", {imageWidth:<?=(int)$board[bo_image_width]?>});
//resizeBoardImage(<?=(int)$board[bo_image_width]?>);
drawFont();
});
</script>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

[이 게시물은 관리자님에 의해 2011-10-31 16:55:28 jQuery에서 이동 됨]

댓글 1개

RINIX 홈페이지 자기소개 아이디로 검색 회원게시물

홈페이지 자기소개 아이디로 검색 회원게시물

09.01.20 15:31:02

파폭에서 이미지 팝업 띄울시 에러가 있어 약간의 코드를 수정했습니다.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
jQuery.resimg = function(element, options){
var setting = { imageWidth:600, borderColor:false }
$.extend(setting, options);

var imageWidth = setting.imageWidth;
var borderColor = setting.borderColor;

//alert($(element).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 });
});
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

파폭에서 이미지 팝업 띄울시 에러가 있어 약간의 코드를 수정했습니다.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
jQuery.resimg = function(element, options){
    var setting = { imageWidth:600, borderColor:false } 
    $.extend(setting, options);

var imageWidth = setting.imageWidth; 
    var borderColor = setting.borderColor; 
	
	//alert($(element).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 }); 
	});
} 
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

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

개발자팁