테스트 사이트 - 개발 중인 베타 버전입니다

이미지 리사이즈 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개

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

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
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 });
});
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

게시글 목록

번호 제목
12651
12650
12646
141
140
138
137
131
130
25048
12644
125
122
12641
12635
12632
29350
12629
29349
12628
29348
12627
12626
12623
25047
25045
25041
25040
25038
25037
117
25036
12620
12618
12617
12614
12612
12608
12606
12605
29347
12604
JavaScript 곰장어
12597
12595
12594
12593
12589
12585
29346
12584
12582
12581
12580
12578
12576
29345
12575
JavaScript ORACLE_CATALOG
12574
12573
29344
115
12572
12570
29343
29342
12569
12567
29337
12566
12564
112
107
104
101
96
94
93
12563
12559
88
85
12558
29336
29333
84
29329
12556
29327
12554
12552
12549
12545
12544
29325
12542
12541
29324
12540
12539
12538