<!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[*/
.container {
position:absolute;overflow:hidden;left:300px;top:100px;width:300px;height:200px;border:solid red 1px;cursor:crosshair;
}
.thumb {
left:100px;top:100px;width:100px;height:75px;
}
/*]]>*/
</style></head>
<body>
<img class="thumb SRC:http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg MagnifyTo:500" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt12.jpg" alt="thumb" />
<img class="thumb " src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="thumb" />
<div id="c1" class="container">
</div>
<script type="text/javascript">
/*<![CDATA[*/
// Image View Pan (24-December-2011)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/
// The functional code size is 3.08K
// ****** Functional Code - NO NEED to Change
function zxcImageViewPan(o){
var reg=new RegExp('\\b'+o.CommonClass+'\\b'),imgs=document.getElementsByTagName('*'),oo,cls,i,z0=0,z0a;
for (;z0<imgs.length;z0++){
if(reg.test(imgs[z0].className)){
oo={};
cls=imgs[z0].className.split(' ');
for (z0a=0;z0a<cls.length;z0a++){
i=cls[z0a].indexOf(':');
if (i>1){
oo[cls[z0a].substring(0,i).toLowerCase()]=cls[z0a].substring(i+1);
}
}
new zxcImageViewPanOOP(imgs[z0],o,oo);
}
}
}
function zxcImageViewPanOOP(img,o,oo){
var oop=this,c=document.getElementById(oo.containerid)||document.getElementById(o.ContainerID),w=img.width,mag=oo.magnifyby,mag=isFinite(mag)?mag*1:o.MagnifyBy,to=o o.magnifyto,to=max=isFinite(to)?to:o.MagnifyTo,max=isFinite(to)&&!isFinite(oo.magnifyby)?to*1:w*(typeof(mag)=='number'?mag:5),ms=oo.duration,ms=isFinite(ms)?ms*1:o.Duration
img.parentNode.removeAttribute('href');
oop.img=img;
oop.cimg=document.createElement('IMG');
oop.src=oo.src||img.src;
oop.c=c;
oop.max=max;
oop.to=null;
oop.ms=typeof(ms)=='number'?ms:1000;
img.onmouseup=function(){ oop.load(true); }
c.onmousemove=function(event){ oop.move(event); }
}
zxcImageViewPanOOP.prototype={
load:function(r){
var oop=this,c=oop.c,lst=c.getElementsByTagName('IMG')[0],cimg=oop.cimg,img=this.img,max=this.max;
if (r&&lst&&lst.scr!=oop.src){
c.removeChild(lst);
}
if (!cimg.src){
clearTimeout(oop.to);
cimg.src=oop.src;
oop.preload(cimg);
}
else {
cimg.width=max;
cimg.height=max*img.height/img.width;
cimg.style.position='absolute';
cimg.style.left=(c.offsetWidth-max)/2+'px';
cimg.style.top=(c.offsetHeight-cimg.height)/2+'px';
oop.animate(cimg,0,100,new Date());
c.appendChild(cimg);
}
},
preload:function(cimg){
var oop=this;
if (cimg.width<50){
oop.to=setTimeout(function(){oop.preload(cimg); },500);
}
else {
oop.load();
}
},
move:function(e){
var oop=this,c=oop.c,cw=c.offsetWidth,ch=c.offsetHeight,img=c.getElementsByTagName('IMG')[0],p=oop.pos(c),m=oop.mse(e),x=(m[0]-p[0])/cw,y=(m[1]-p[1])/ch;
if (img){
var mx=-img.width+cw,my=-img.height+ch;
img.style.left=Math.min(Math.max(mx*x,mx),0)+'px';
img.style.top=Math.min(Math.max(my*y,my),0)+'px';
}
},
animate:function(obj,f,t,srt){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/oop.ms*ms+f;
if (isFinite(now)&&now>=0){
obj.style.filter='alpha(opacity='+now+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=now/100-.001;
}
if (ms<oop.ms){
setTimeout(function(){ oop.animate(obj,f,t,srt); },10);
}
},
pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
},
mse:function(e){
if (window.event){
var e=window.event,d=document,docs=[d.body.scrollLeft,d.body.scrollTop];
if (!d.body.scrollTop){
docs=[d.documentElement.scrollLeft,d.documentElement.scrollTop];
}
return [e.clientX+docs[0],e.clientY+docs[1]];
}
return [e.pageX,e.pageY];
}
}
//new zxcImageViewPanOOP({
// ContainerID:'c1'
//});
zxcImageViewPan({
CommonClass:'thumb', // the common class name of the images to magnify. (string)
ContainerID:'c1', // the unique ID mame of the magnified image parent DIV. (string)
// Default Options(see Note 1)
MagnifyBy:5, //(optional) magnification factor of the magnified image. (number, default = 5)
MagnifyTo:400, //(optional) explicit width of the magnified image. (number, default = 3)
Duration:1000 //(optional) the duration of the animation, in milliseconds. (number, default = 1000)
});
// ** Note 1
// Options declared in the image class name will have priority over the initialization Default Options
// and may include additional the option:
// SRC:WinterPalace.jpg (where the src of the magnified image is different to the original image)
/*]]>*/
</script>
</body>
</html>