mirror of
https://github.com/Lastorder-DC/rhymix.git
synced 2026-01-04 01:01:41 +09:00
Issue 2891: Image resize addon bug fix and design enhancement.
git-svn-id: http://xe-core.googlecode.com/svn/branches/maserati@12659 201d5d3c-b55e-5fd7-737f-ddc643e51545
This commit is contained in:
ChanMyeong
parent
afc2d40d30
commit
c3afceb466
6 changed files with 78 additions and 70 deletions
BIN
addons/resize_image/btn.png
Normal file
BIN
addons/resize_image/btn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
|
|
@ -9,7 +9,6 @@ var xScreen = null;
|
|||
function getScreen() {
|
||||
var body = $(document.body);
|
||||
var controls, imgframe, closebtn, prevbtn, nextbtn;
|
||||
|
||||
// 스크린이 없으면 스크린을 만든다.
|
||||
if (!xScreen) {
|
||||
// 검은 스크린
|
||||
|
|
@ -33,54 +32,80 @@ function getScreen() {
|
|||
zIndex:510
|
||||
});
|
||||
|
||||
// 닫기 버튼
|
||||
closebtn = $("<img>")
|
||||
.attr("id", "xe_gallery_closebtn")
|
||||
.attr("src", request_uri+"addons/resize_image/iconClose.png")
|
||||
// 이전 버튼
|
||||
prevbtn = $('<button type="button" id="xe_gallery_prevbtn" />')
|
||||
.css({
|
||||
top : "10px"
|
||||
left: "10px",
|
||||
backgroundPosition: "0 -64px"
|
||||
})
|
||||
.click(function(){xScreen.xePrev()})
|
||||
.appendTo(controls);
|
||||
|
||||
// 닫기 버튼
|
||||
closebtn = $('<button type="button" id="xe_gallery_closebtn" />')
|
||||
.css({
|
||||
top: "10px",
|
||||
backgroundPosition: "0 0"
|
||||
})
|
||||
.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>")
|
||||
nextbtn = $('<button type="button" id="xe_gallery_nextbtn" />')
|
||||
.attr("id", "xe_gallery_nextbtn")
|
||||
.attr("src", request_uri+"addons/resize_image/iconRight.png")
|
||||
.css("right","10px")
|
||||
.css({
|
||||
right: "10px",
|
||||
backgroundPosition: "0 -128px"
|
||||
})
|
||||
.click(function(){xScreen.xeNext()})
|
||||
.appendTo(controls);
|
||||
|
||||
// 버튼 공통 속성
|
||||
controls.find("img")
|
||||
.attr({
|
||||
width : 60,
|
||||
height : 60,
|
||||
className : "iePngFix"
|
||||
})
|
||||
controls.find(">button")
|
||||
.css({
|
||||
position : "absolute",
|
||||
width : "60px",
|
||||
height : "60px",
|
||||
width : "64px",
|
||||
height : "64px",
|
||||
zIndex : 530,
|
||||
cursor : "pointer"
|
||||
});
|
||||
cursor : "pointer",
|
||||
border : 0,
|
||||
margin : 0,
|
||||
padding : 0,
|
||||
backgroundColor: "transparent",
|
||||
backgroundImage: "url(" + request_uri + "addons/resize_image/btn.png)",
|
||||
backgroundRepeat: "no-repeat",
|
||||
opacity: ".5",
|
||||
filter: "alpha(opacity=50)"
|
||||
})
|
||||
.mouseover(function(){
|
||||
$(this).css({
|
||||
opacity: "1",
|
||||
filter: "alpha(opacity=100)"
|
||||
});
|
||||
})
|
||||
.mouseout(function(){
|
||||
$(this).css({
|
||||
opacity: ".5",
|
||||
filter: "alpha(opacity=50)"
|
||||
});
|
||||
})
|
||||
.focus(function(){
|
||||
$(this).trigger('mouseover');
|
||||
})
|
||||
.blur(function(){
|
||||
$(this).trigger('mouseout');
|
||||
})
|
||||
;
|
||||
|
||||
// 이미지 홀더
|
||||
imgframe = $("<img>")
|
||||
.attr("id", "xe_gallery_holder")
|
||||
.css({
|
||||
border: '7px solid white',
|
||||
border: '5px solid white',
|
||||
zindex: 520,
|
||||
'max-width': 'none'
|
||||
maxWidth: 'none',
|
||||
borderRadius: '5px',
|
||||
boxShadow: '0 0 10px #000'
|
||||
})
|
||||
.appendTo(controls).draggable();
|
||||
|
||||
|
|
@ -90,28 +115,18 @@ function getScreen() {
|
|||
xScreen.xeShow = function() {
|
||||
var clientWidth = $(window).width();
|
||||
var clientHeight = $(window).height();
|
||||
|
||||
$("#xe_gallery_controls,#xe_gallery_screen").css({
|
||||
display:"block",
|
||||
width : $(document).width() + "px",
|
||||
height : $(document).height() + "px",
|
||||
left : 0,
|
||||
top : 0
|
||||
//width : clientWidth + "px",
|
||||
//height : clientHeight + "px",
|
||||
// left : $(document).scrollLeft(),
|
||||
// top : $(document).scrollTop()
|
||||
$("#xe_gallery_controls,#xe_gallery_screen").show().css({
|
||||
top : 0,
|
||||
right : 0,
|
||||
bottom : 0,
|
||||
left : 0
|
||||
});
|
||||
|
||||
closebtn.css("left", Math.round((clientWidth-60)/2) + "px");
|
||||
|
||||
$("#xe_gallery_prevbtn,#xe_gallery_nextbtn").css("top", Math.round( (clientHeight-60)/2 ) + "px");
|
||||
|
||||
$("#xe_gallery_prevbtn,#xe_gallery_nextbtn").css("top", Math.round(clientHeight/2 - 32) + "px");
|
||||
this.xeMove(0);
|
||||
};
|
||||
xScreen.xeHide = function(event) {
|
||||
xScreen.css("display","none");
|
||||
controls.css("display","none");
|
||||
xScreen.hide();
|
||||
controls.hide();
|
||||
};
|
||||
xScreen.xePrev = function() {
|
||||
this.xeMove(-1);
|
||||
|
|
@ -122,29 +137,31 @@ function getScreen() {
|
|||
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");
|
||||
|
||||
//textyle 이미지 리사이즈 처리
|
||||
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( parseInt($(document).scrollLeft()) + (clientWidth-imgframe.width()-14)/2, 0 ) + "px",
|
||||
top : Math.round( parseInt($(document).scrollTop()) + (clientHeight-imgframe.height()-14)/2, 0 ) + "px"
|
||||
top : Math.round( (clientHeight-imgframe.height()-14)/2, 0 ) + "px"
|
||||
});
|
||||
|
||||
closebtn.css({
|
||||
left : Math.round( Math.max( parseInt($(document).scrollLeft()) + (clientWidth-closebtn.width())/2, 0 ) ) + "px",
|
||||
top : Math.round( Math.max( parseInt($(document).scrollTop()) + 10, 0 ) ) + "px"
|
||||
});
|
||||
top : "10px"
|
||||
}).focus();
|
||||
};
|
||||
|
||||
// 스크린을 닫는 상황
|
||||
$(document).keydown(xScreen.xeHide);
|
||||
$(document).keydown(function(e){
|
||||
if(e.which == 27){
|
||||
xScreen.xeHide();
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
controls = $("#xe_gallery_controls");
|
||||
imgframe = $("#xe_gallery_holder");
|
||||
|
|
@ -152,7 +169,6 @@ function getScreen() {
|
|||
prevbtn = $("#xe_gallery_prevbtn");
|
||||
nextbtn = $("#xe_gallery_nextbtn");
|
||||
}
|
||||
|
||||
return xScreen;
|
||||
}
|
||||
|
||||
|
|
@ -169,15 +185,15 @@ function slideshow(event) {
|
|||
xScreen.xeShow();
|
||||
}
|
||||
|
||||
/* DOM READY */
|
||||
$(function() {
|
||||
/* Window Load */
|
||||
$(window).load(function(){
|
||||
var regx_skip = /(?:(modules|addons|classes|common|layouts|libs|widgets|widgetstyles)\/)/i;
|
||||
var regx_allow_i6pngfix = /(?:common\/tpl\/images\/blank\.gif$)/i;
|
||||
/**
|
||||
* 본문 폭 구하기 위한 개체
|
||||
* IE6에서 본문폭을 넘는 이미지가 있으면 그 크기로 구해지는 문제 우회용
|
||||
**/
|
||||
var dummy = $('<div style="height:1; overflow:hidden; opacity:0; display:block; clear:both;"></div>');
|
||||
var dummy = $('<div style="height:1px;overflow:hidden;opacity:0;display:block;clear:both"></div>');
|
||||
|
||||
/**
|
||||
* 리사이즈 실행 함수
|
||||
|
|
@ -211,7 +227,7 @@ $(function() {
|
|||
});
|
||||
}
|
||||
|
||||
$('div.xe_content').each(function() {
|
||||
$('.xe_content').each(function() {
|
||||
var contentWidth = dummy.appendTo(this).width();
|
||||
dummy.remove();
|
||||
if(!contentWidth) return;
|
||||
|
|
@ -220,9 +236,7 @@ $(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);
|
||||
});
|
||||
|
||||
|
|
|
|||
8
addons/resize_image/js/resize_image.min.js
vendored
8
addons/resize_image/js/resize_image.min.js
vendored
|
|
@ -1,7 +1 @@
|
|||
/**
|
||||
* @brief 화면내에서 상위 영역보다 이미지가 크면 리사이즈를 하고 클릭시 원본을 보여줄수 있도록 변경
|
||||
**/
|
||||
(function($){var xScreen=null
|
||||
function getScreen(){var body=$(document.body),controls,imgframe,closebtn,prevbtn,nextbtn;if(!xScreen){xScreen=$("<div>").attr("id","xe_gallery_screen").css({position:"fixed",display:"none",backgroundColor:"black",zIndex:500,opacity:0.7});controls=$("<div>").attr("id","xe_gallery_controls").css({position:"fixed",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',zindex:520,'max-width':'none'}).appendTo(controls).draggable();body.append(xScreen).append(controls);xScreen.xeShow=function(){var clientWidth=$(window).width(),clientHeight=$(window).height();$("#xe_gallery_controls,#xe_gallery_screen").css({display:"block",width:$(document).width()+"px",height:$(document).height()+"px",left:0,top:0});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(),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(parseInt($(document).scrollLeft())+(clientWidth-imgframe.width()-14)/2,0)+"px",top:Math.round(parseInt($(document).scrollTop())+(clientHeight-imgframe.height()-14)/2,0)+"px"});closebtn.css({left:Math.round(Math.max(parseInt($(document).scrollLeft())+(clientWidth-closebtn.width())/2,0))+"px",top:Math.round(Math.max(parseInt($(document).scrollTop())+10,0))+"px"})};$(document).keydown(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).closest('.xe_content'),imglist=container.find("img[rel=xe_gallery]"),currentIdx=$.inArray($(this).get(0),imglist.get()),xScreen=getScreen();xScreen.list=imglist;xScreen.index=currentIdx;xScreen.xeShow()};$(function(){var regx_skip=/(?:(modules|addons|classes|common|layouts|libs|widgets|widgetstyles)\/)/i,regx_allow_i6pngfix=/(?:common\/tpl\/images\/blank\.gif$)/i,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,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(){var contentWidth=dummy.appendTo(this).width();dummy.remove();if(!contentWidth)return;$('img',this).each(function(){var $img=$(this),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)
|
||||
(function(c){var d=null;function a(){var g=c(document.body);var h,f,e,j,i;if(!d){d=c("<div>").attr("id","xe_gallery_screen").css({position:"fixed",display:"none",backgroundColor:"black",zIndex:500,opacity:0.7});h=c("<div>").attr("id","xe_gallery_controls").css({position:"fixed",display:"none",overflow:"hidden",zIndex:510});j=c('<button type="button" id="xe_gallery_prevbtn" />').css({left:"10px",backgroundPosition:"0 -64px"}).click(function(){d.xePrev()}).appendTo(h);e=c('<button type="button" id="xe_gallery_closebtn" />').css({top:"10px",backgroundPosition:"0 0"}).click(function(){d.xeHide()}).appendTo(h);i=c('<button type="button" id="xe_gallery_nextbtn" />').attr("id","xe_gallery_nextbtn").css({right:"10px",backgroundPosition:"0 -128px"}).click(function(){d.xeNext()}).appendTo(h);h.find(">button").css({position:"absolute",width:"64px",height:"64px",zIndex:530,cursor:"pointer",border:0,margin:0,padding:0,backgroundColor:"transparent",backgroundImage:"url("+request_uri+"addons/resize_image/btn.png)",backgroundRepeat:"no-repeat",opacity:".5",filter:"alpha(opacity=50)"}).mouseover(function(){c(this).css({opacity:"1",filter:"alpha(opacity=100)"})}).mouseout(function(){c(this).css({opacity:".5",filter:"alpha(opacity=50)"})}).focus(function(){c(this).trigger("mouseover")}).blur(function(){c(this).trigger("mouseout")});f=c("<img>").attr("id","xe_gallery_holder").css({border:"5px solid white",zindex:520,maxWidth:"none",borderRadius:"5px",boxShadow:"0 0 10px #000"}).appendTo(h).draggable();g.append(d).append(h);d.xeShow=function(){var l=c(window).width();var k=c(window).height();c("#xe_gallery_controls,#xe_gallery_screen").show().css({top:0,right:0,bottom:0,left:0});c("#xe_gallery_prevbtn,#xe_gallery_nextbtn").css("top",Math.round(k/2-32)+"px");this.xeMove(0)};d.xeHide=function(k){d.hide();h.hide()};d.xePrev=function(){this.xeMove(-1)};d.xeNext=function(){this.xeMove(1)};d.xeMove=function(n){var m=c(window).width();var k=c(window).height();this.index+=n;j.css("visibility",(this.index>0)?"visible":"hidden");i.css("visibility",(this.index<this.list.size()-1)?"visible":"hidden");var l=this.list.eq(this.index).attr("rawsrc");if(!l){l=this.list.eq(this.index).attr("src")}f.attr("src",l).css({left:Math.round(parseInt(c(document).scrollLeft())+(m-f.width()-14)/2,0)+"px",top:Math.round((k-f.height()-14)/2,0)+"px"});e.css({left:Math.round(Math.max(parseInt(c(document).scrollLeft())+(m-e.width())/2,0))+"px",top:"10px"}).focus()};c(document).keydown(function(k){if(k.which==27){d.xeHide();return false}else{return true}})}else{h=c("#xe_gallery_controls");f=c("#xe_gallery_holder");e=c("#xe_gallery_closebtn");j=c("#xe_gallery_prevbtn");i=c("#xe_gallery_nextbtn")}return d}function b(h){var f=c(this).closest(".xe_content");var e=f.find("img[rel=xe_gallery]");var g=c.inArray(c(this).get(0),e.get());var i=a();i.list=e;i.index=g;i.xeShow()}c(window).load(function(){var g=/(?:(modules|addons|classes|common|layouts|libs|widgets|widgetstyles)\/)/i;var f=/(?:common\/tpl\/images\/blank\.gif$)/i;var h=c('<div style="height:1px;overflow:hidden;opacity:0;display:block;clear:both"></div>');function e(k,m){if(!m){m=0}if(m>=10){return}var l=this;var j={width:l.width(),height:l.height()};if(!j.width||!j.height){setTimeout(function(){e.call(l,k,++m)},200);return}if(j.width<=k){return}var i=k/j.width;l.removeAttr("width").removeAttr("height").css({width:k,height:parseInt(j.height*i,10)})}c(".xe_content").each(function(){var i=h.appendTo(this).width();h.remove();if(!i){return}c("img",this).each(function(){var j=c(this);var k=j.attr("src");if(g.test(k)&&!f.test(k)){return}j.attr("rel","xe_gallery");e.call(j,i)});c("img[rel=xe_gallery]",this).live("mouseover",function(){var j=c(this);if(!j.parent("a").length&&!j.attr("onclick")){j.css("cursor","pointer").click(b)}})})})})(jQuery);
|
||||
Loading…
Add table
Add a link
Reference in a new issue