Code:
<!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>
Image smoothing on jQuery Image Magnify v1.11
Reply With Quote
Bookmarks