묻고답하기
이미지 리사이즈...
2011.02.26 15:12
XE의 기본 애드온으로 탑재되어 있는 resize_image를 적용하고 있는데요.
이 애드온의 경우 이미지가 크면 리사이즈를 하고,
리사이즈된 이미지를 클릭하면 원본 사이즈 창을 띄우는데..
클릭기능을 없애고 단순히 이미지 리사이즈만 가능하도록 하려면 어떻게 해야 할 까요?
이런 기능의 별도 애드온은 못찾겠고,
기존 애드온을 수정하려니 js로 작성된 코드는 하나도 모르겠네요.
resize_image_min.js 파일을 수정하면 될 것 같긴 한데...
도와주시면 정말 감사하겠습니다.
참고삼아 resize_image_min.js 파일의 내용을 붙여넣습니다.
/**
* @brief 화면내에서 상위 영역보다 이미지가 크면 리사이즈를 하고 클릭시 원본을 보여줄수 있도록 변경
**/
(function($){var xScreen=null;function getScreen(){var body=$(document.body);var controls,imgframe,closebtn,prevbtn,nextbtn;if(!xScreen){xScreen=$("<div>").attr("id","xe_gallery_screen").css({position:"absolute",display:"none",backgroundColor:"black",zIndex:500,opacity:0.5});controls=$("<div>").attr("id","xe_gallery_controls").css({position:"absolute",display:"none",overflow:"hidden",zIndex:510});closebtn=$("<img>").attr("id","xe_gallery_closebtn").attr("src",request_uri+"addons/resize_image/iconClose.png").css({top:"10px"}).click(function(){xScreen.xeHide()}).appendTo(controls);prevbtn=$("<img>").attr("id","xe_gallery_prevbtn").attr("src",request_uri+"addons/resize_image/iconLeft.png").css("left","10px").click(function(){xScreen.xePrev()}).appendTo(controls);nextbtn=$("<img>").attr("id","xe_gallery_nextbtn").attr("src",request_uri+"addons/resize_image/iconRight.png").css("right","10px").click(function(){xScreen.xeNext()}).appendTo(controls);controls.find("img").attr({width:60,height:60,className:"iePngFix"}).css({position:"absolute",width:"60px",height:"60px",zIndex:530,cursor:"pointer"});imgframe=$("<img>").attr("id","xe_gallery_holder").css("border","7px solid white").css("zIndex",520).appendTo(controls).draggable();body.append(xScreen).append(controls);xScreen.xeShow=function(){var clientWidth=$(window).width();var clientHeight=$(window).height();$("#xe_gallery_controls,#xe_gallery_screen").css({display:"block",width:clientWidth+"px",height:clientHeight+"px",left:$(document).scrollLeft(),top:$(document).scrollTop()});closebtn.css("left",Math.round((clientWidth-60)/2)+"px");$("#xe_gallery_prevbtn,#xe_gallery_nextbtn").css("top",Math.round((clientHeight-60)/2)+"px");this.xeMove(0);};xScreen.xeHide=function(event){xScreen.css("display","none");controls.css("display","none");};xScreen.xePrev=function(){this.xeMove(-1);};xScreen.xeNext=function(){this.xeMove(1);};xScreen.xeMove=function(val){var clientWidth=$(window).width();var clientHeight=$(window).height();this.index+=val;prevbtn.css("visibility",(this.index>0)?"visible":"hidden");nextbtn.css("visibility",(this.index<this.list.size()-1)?"visible":"hidden");var src=this.list.eq(this.index).attr("rawsrc");if(!src)src=this.list.eq(this.index).attr("src");imgframe.attr("src",src).css({left:Math.round(Math.max((clientWidth-imgframe.width()-14)/2,0))+"px",top:Math.round(Math.max((clientHeight-imgframe.height()-14)/2,0))+"px"});};$(document).scroll(xScreen.xeHide);$(document).keydown(xScreen.xeHide);$(window).resize(xScreen.xeHide);$(window).scroll(xScreen.xeHide);}else{controls=$("#xe_gallery_controls");imgframe=$("#xe_gallery_holder");closebtn=$("#xe_gallery_closebtn");prevbtn=$("#xe_gallery_prevbtn");nextbtn=$("#xe_gallery_nextbtn");}
return xScreen;}
function slideshow(event){var container=$(this).parents(".xe_content");var imglist=container.find("img[rel=xe_gallery]");var currentIdx=$.inArray($(this).get(0),imglist.get());var xScreen=getScreen();xScreen.list=imglist;xScreen.index=currentIdx;xScreen.xeShow();}
$(function(){var regx_skip=/(?:(modules|addons|classes|common|layouts|libs|widgets|widgetstyles)\/)/i;var regx_allow_i6pngfix=/(?:common\/tpl\/images\/blank\.gif$)/i;var dummy=$('<div style="height:1; overflow:hidden; opacity:0; display:block; clear:both;"></div>');function doResize(contentWidth,count){if(!count)count=0;if(count>=10)return;var $img=this;var beforSize={'width':$img.width(),'height':$img.height()};if(!beforSize.width||!beforSize.height){setTimeout(function(){doResize.call($img,contentWidth,++count)},200);return;}
if(beforSize.width<=contentWidth)return;var resize_ratio=contentWidth/beforSize.width;$img.removeAttr('width').removeAttr('height').css({'width':contentWidth,'height':parseInt(beforSize.height*resize_ratio,10)});}
$('div.xe_content').each(function(){dummy.appendTo(this);var contentWidth=dummy.width();dummy.remove();if(!contentWidth)return;$('img',this).each(function(){var $img=$(this);var imgSrc=$img.attr('src');if(regx_skip.test(imgSrc)&&!regx_allow_i6pngfix.test(imgSrc))return;$img.attr('rel','xe_gallery');doResize.call($img,contentWidth);});$('img[rel=xe_gallery]',this).live('mouseover',function(){var $img=$(this);if(!$img.parent('a').length&&!$img.attr('onclick')){$img.css('cursor','pointer').click(slideshow);}});});});})(jQuery);
이 애드온의 경우 이미지가 크면 리사이즈를 하고,
리사이즈된 이미지를 클릭하면 원본 사이즈 창을 띄우는데..
클릭기능을 없애고 단순히 이미지 리사이즈만 가능하도록 하려면 어떻게 해야 할 까요?
이런 기능의 별도 애드온은 못찾겠고,
기존 애드온을 수정하려니 js로 작성된 코드는 하나도 모르겠네요.
resize_image_min.js 파일을 수정하면 될 것 같긴 한데...
도와주시면 정말 감사하겠습니다.
참고삼아 resize_image_min.js 파일의 내용을 붙여넣습니다.
/**
* @brief 화면내에서 상위 영역보다 이미지가 크면 리사이즈를 하고 클릭시 원본을 보여줄수 있도록 변경
**/
(function($){var xScreen=null;function getScreen(){var body=$(document.body);var controls,imgframe,closebtn,prevbtn,nextbtn;if(!xScreen){xScreen=$("<div>").attr("id","xe_gallery_screen").css({position:"absolute",display:"none",backgroundColor:"black",zIndex:500,opacity:0.5});controls=$("<div>").attr("id","xe_gallery_controls").css({position:"absolute",display:"none",overflow:"hidden",zIndex:510});closebtn=$("<img>").attr("id","xe_gallery_closebtn").attr("src",request_uri+"addons/resize_image/iconClose.png").css({top:"10px"}).click(function(){xScreen.xeHide()}).appendTo(controls);prevbtn=$("<img>").attr("id","xe_gallery_prevbtn").attr("src",request_uri+"addons/resize_image/iconLeft.png").css("left","10px").click(function(){xScreen.xePrev()}).appendTo(controls);nextbtn=$("<img>").attr("id","xe_gallery_nextbtn").attr("src",request_uri+"addons/resize_image/iconRight.png").css("right","10px").click(function(){xScreen.xeNext()}).appendTo(controls);controls.find("img").attr({width:60,height:60,className:"iePngFix"}).css({position:"absolute",width:"60px",height:"60px",zIndex:530,cursor:"pointer"});imgframe=$("<img>").attr("id","xe_gallery_holder").css("border","7px solid white").css("zIndex",520).appendTo(controls).draggable();body.append(xScreen).append(controls);xScreen.xeShow=function(){var clientWidth=$(window).width();var clientHeight=$(window).height();$("#xe_gallery_controls,#xe_gallery_screen").css({display:"block",width:clientWidth+"px",height:clientHeight+"px",left:$(document).scrollLeft(),top:$(document).scrollTop()});closebtn.css("left",Math.round((clientWidth-60)/2)+"px");$("#xe_gallery_prevbtn,#xe_gallery_nextbtn").css("top",Math.round((clientHeight-60)/2)+"px");this.xeMove(0);};xScreen.xeHide=function(event){xScreen.css("display","none");controls.css("display","none");};xScreen.xePrev=function(){this.xeMove(-1);};xScreen.xeNext=function(){this.xeMove(1);};xScreen.xeMove=function(val){var clientWidth=$(window).width();var clientHeight=$(window).height();this.index+=val;prevbtn.css("visibility",(this.index>0)?"visible":"hidden");nextbtn.css("visibility",(this.index<this.list.size()-1)?"visible":"hidden");var src=this.list.eq(this.index).attr("rawsrc");if(!src)src=this.list.eq(this.index).attr("src");imgframe.attr("src",src).css({left:Math.round(Math.max((clientWidth-imgframe.width()-14)/2,0))+"px",top:Math.round(Math.max((clientHeight-imgframe.height()-14)/2,0))+"px"});};$(document).scroll(xScreen.xeHide);$(document).keydown(xScreen.xeHide);$(window).resize(xScreen.xeHide);$(window).scroll(xScreen.xeHide);}else{controls=$("#xe_gallery_controls");imgframe=$("#xe_gallery_holder");closebtn=$("#xe_gallery_closebtn");prevbtn=$("#xe_gallery_prevbtn");nextbtn=$("#xe_gallery_nextbtn");}
return xScreen;}
function slideshow(event){var container=$(this).parents(".xe_content");var imglist=container.find("img[rel=xe_gallery]");var currentIdx=$.inArray($(this).get(0),imglist.get());var xScreen=getScreen();xScreen.list=imglist;xScreen.index=currentIdx;xScreen.xeShow();}
$(function(){var regx_skip=/(?:(modules|addons|classes|common|layouts|libs|widgets|widgetstyles)\/)/i;var regx_allow_i6pngfix=/(?:common\/tpl\/images\/blank\.gif$)/i;var dummy=$('<div style="height:1; overflow:hidden; opacity:0; display:block; clear:both;"></div>');function doResize(contentWidth,count){if(!count)count=0;if(count>=10)return;var $img=this;var beforSize={'width':$img.width(),'height':$img.height()};if(!beforSize.width||!beforSize.height){setTimeout(function(){doResize.call($img,contentWidth,++count)},200);return;}
if(beforSize.width<=contentWidth)return;var resize_ratio=contentWidth/beforSize.width;$img.removeAttr('width').removeAttr('height').css({'width':contentWidth,'height':parseInt(beforSize.height*resize_ratio,10)});}
$('div.xe_content').each(function(){dummy.appendTo(this);var contentWidth=dummy.width();dummy.remove();if(!contentWidth)return;$('img',this).each(function(){var $img=$(this);var imgSrc=$img.attr('src');if(regx_skip.test(imgSrc)&&!regx_allow_i6pngfix.test(imgSrc))return;$img.attr('rel','xe_gallery');doResize.call($img,contentWidth);});$('img[rel=xe_gallery]',this).live('mouseover',function(){var $img=$(this);if(!$img.parent('a').length&&!$img.attr('onclick')){$img.css('cursor','pointer').click(slideshow);}});});});})(jQuery);
