PDA

View Full Version : Image smoothing on jQuery Image Magnify v1.11



More2Do
07-15-2014, 04:18 PM
1) Script Title: jQuery Image Magnify v1.11

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/imagemagnify.htm

3) Describe problem: Hello, I've installed the code for Image Magnify and it's working really well. The only issue I'm having is that the non-magnified image looks really poor in IE, FF, Opera (It looks good in Chrome). On the Mac side, FF, Safari, mobile phones, iPad looks good. Non of the css image smoothing techniques I've tried seem to work. Is there a fix for this? Also, I tried the suggestion in the post "JQuery Image Magnify - image rendering problem", but this did not work.

http://crestviewmontana.com/stage/html/community.html

Thanks for your help!
Jon

vwphillips
07-16-2014, 01:20 PM
the page image is distorted because the size is much less than the natural image
the DD script does not allow you to specify different image SRCs for the page and zoom image

try this


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/

.zoomimg {
z-Index:1000;border:solid red 2px;
}

/*]]>*/
</style>

</head>

<body>
<img id="imagebox" src="http://www.vicsjavascripts.org/StdImages/Egypt5.jpg" class="magnify fancy" style="width: 215px; height: 275px"/></body>

<script type="text/javascript">
/*<![CDATA[*/
// Image Zoom (16-July-2014)
// by: Vic P{hillips - http://www.vicsjavascripts.org/


var zxcImageZoom={

init:function(o){
var id=o.ImageID,z=o.Zoom,ms=o.Animate,img=document.getElementById(id);
if (img){
var i=document.createElement('IMG'),m;
i.style.position='fixed';
i.style.width=i.style.height='0px';
m=i.cloneNode(false)
m.style.bottom=m.style.right='0px';
i.src=o.ZoomSRC||img.src;
i.className=o.ZoomClass;
i.style.left=i.style.top='-3000px';
o.ni=new Image();
o.ni.src=i.src;
o.img=img;
o.m=m;
o.ud=true;
document.body.appendChild(i);
document.body.appendChild(m);
o.z=typeof(z)=='number'&&z>1?z:null;
o.ms=typeof(ms)=='number'&&ms>100?ms:1000;
o.a=[[i,'width',img.width],[i,'height',img.height],[i,'left',0],[i,'top',0],[i,'',0]];
this.addevt(img,'click','open',o);
this.addevt(i,'click','open',o);
this.addevt(window,'resize','resize',o);
this.o=o;
}
},

open:function(o){
if (o.ni.width>40){
this.o!=o&&!this.o.ud?this.open(this.o):null;
var p=this.pos(o.img),w=o.img.width,h=o.img.height,zw=o.z?w*o.z:o.ni.width,zh=o.z?h*o.z:o.ni.height,x=Math.max((o.m.offsetLeft-zw)/2,5),y=Math.max((o.m.offsetTop-zh)/2,5),s=!document.body.scrollTop?[document.documentElement.scrollLeft,document.documentElement.scrollTop]:[document.body.scrollLeft,document.body.scrollTop];
this.animate(o,o.a[0],o.ud?w:zw,o.ud?zw:w,new Date(),o.ms);
this.animate(o,o.a[1],o.ud?h:zh,o.ud?zh:h,new Date(),o.ms);
this.animate(o,o.a[2],o.ud?p[0]-s[0]:x,o.ud?x:p[0]-s[0],new Date(),o.ms);
this.animate(o,o.a[3],o.ud?p[1]-s[1]:y,o.ud?y:p[1]-s[1],new Date(),o.ms);
this.animate(o,o.a[4],o.ud?0:100,o.ud?100:0,new Date(),o.ms);
o.ud=!o.ud;
}
},

pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
},

resize:function(o){
if (!o.ud){
this.animate(o,o.a[2],o.a[2][2],Math.max((o.m.offsetLeft-o.a[0][2])/2,5),new Date(),o.ms/2);
this.animate(o,o.a[3],o.a[3][2],Math.max((o.m.offsetTop-o.a[1][2])/2,5),new Date(),o.ms/2);
}
},

animate:function(o,a,f,t,srt,mS){
clearTimeout(a[4]);
var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
this.opc(o.img,50);
if (isFinite(n)){
n=Math.max(f<0||t<0?n:0,n);
a[1]?a[0].style[a[1]]=n+'px':oop.opc(a[0],n);
a[2]=n;
}
if (ms<mS){
a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
}
else {
a[2]=t;
a[1]?a[0].style[a[1]]=t+'px':oop.opc(a[0],t);
if (!a[1]){
if (o.ud){
oop.opc(o.img,100);
a[0].style.left=a[0].style.top='-3000px';
}
}
}
},

opc:function(o,n){
o.style.filter='alpha(opacity='+n+')';
o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
},


addevt:function(o,t,f,p,p1){
var oop=this;
o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
}



}

zxcImageZoom.init({
ImageID:'imagebox', // the unique ID name of the page image. (string)
ZoomClass:'zoomimg', // the class name of the zoom image(for z-Index etc). (string)
ZoomSRC:'http://crestviewmontana.com/stage/images/crestview_plot_map-rollover.jpg', //(optional) the SRC of the zoom image. (string, default = the src of the page image)
Zoom:4, //(optional) the zoom factor. (number, default = the natural zoom image size)
Animate:1000 //(optional) the animation duration in milliseconds. (number, default = 1000)
})

/*]]>*/
</script>
</body>

</html>