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>
<script type="text/javascript">
/*<![CDATA[*/
// Magnify Ellipse. (26-Febuary-2011)
// by Vic Phillips. http://www.vicsjavascripts.org.uk/
// ****** Functional Code - NO NEED to Change.
function MagnifyEllipse(o){
var oop=this,obj=document.getElementById(o.ID),mag,img,msk,large,bg,note,zi=o.zIndex,img=o.MagnifierImage,fg,posx=0,posy=0,sw=o.SmallImage[0],sh=o.SmallImage[1],zoom=o.LargeImage[1],zoom=typeof(zoom)=='number'&&zoom>=1?zoom:2,z0=0,z0a,radx=o.MagnifierRadius[0],rady=typeof(o.MagnifierRadius[1])=='number'?o.MagnifierRadius[1]:radx,szx=radx*2,szy=rady*2,r=Math.PI/180,deg,x,clips=[],objs=[],mos=o.MagnifierOffset,std=o.OffsetDisplay;
mag=document.createElement('DIV');
mag.style.position='absolute';
mag.style.zIndex=typeof(zi)=='number'?zi:'101';
mag.style.width=szx+'px';
mag.style.height=szy+'px';
document.body.appendChild(mag);
if (typeof(img)=='object'&&img.constructor==Array&&typeof(img[0])=='string'){
fg=document.createElement('IMG');
fg.src=img[0];
fg.style.position='absolute';
fg.style.zIndex='1';
fg.style.left='0px';
fg.style.top='0px';
if (typeof(img[1])=='number'){
fg.style.width=img[1]+'px';
if (img[1]>szx){
posx=(img[1]-szx)*2;
}
}
if (typeof(img[2])=='number'){
fg.style.height=img[2]+'px';
if (img[2]>szy){
posy=(img[1]-szy)*2;
}
}
mag.appendChild(fg);
}
msk=document.createElement('DIV');
msk.style.position='absolute';
msk.style.zIndex='0';
mag.appendChild(msk);
large=document.createElement('IMG');
large.src=o.LargeImage[0];
large.style.position='absolute';
large.style.width=sw*zoom+'px';
large.style.height=sh*zoom+'px';
for (;z0<szx-2;z0++){
deg=z0*180/szx+90;
x=radx+Math.floor(radx*Math.cos(deg*r));
clips[z0]=[x+1,szx-x-1,Math.floor(rady*Math.sin(deg*r))+rady];
large=large.cloneNode(true);
objs[z0]=large;
msk.appendChild(large);
}
this.mosx=0;
this.mosy=0;
if (typeof(mos)=='object'&&mos.constructor==Array){
if (typeof(mos[0])=='number'){
this.mosx=mos[0];
}
if (typeof(mos[1])=='number'){
this.mosy=mos[1];
}
}
this.zoom=zoom;
this.obj=obj;
this.mag=mag;
this.msk=msk;
this.sw=sw;
this.sh=sh;
this.posx=posx;
this.posy=posy;
this.std=!(typeof(std)=='boolean'&&std);
this.objs=objs;
this.clips=clips;
this.radx=radx;
this.rady=rady;
this.msex=0;
this.msey=0;
this.mag.style.display='none';
this.addevt(document,'mousemove','move');
this.zary=false;
if (this.zoominit&&typeof(o.Zoom)=='object'){
this.zoominit(o.Zoom,mag,zoom,szx,szy);
}
}
MagnifyEllipse.prototype={
clip:function(lft,top){
var msex=this.msex,msey=this.msey,pos=this.pos(this.obj),mag=this.mag,msk=this.msk,mosx=this.mosx,mosy=this.mosy,sw=this.sw,sh=this.sh,radx=this.radx,rady=this.rady,zm=this.zoom,z0=0,clips=this.clips,objs=this.objs;
mag.style.left=msex+mosx-radx+'px';
mag.style.top=msey+mosy-rady+'px';
msex-=pos[0];
msey-=pos[1];
msex*=zm;
msey*=zm;
radx*=this.std?(zm+1):1;
msk.style.left=-msex+radx+'px';
msk.style.top=-msey+radx+'px';
msex-=radx;
msey-=radx;
for (;z0<objs.length;z0++){
objs[z0].style.clip='rect('+(msey+clips[z0][2])+'px,'+(msex+clips[z0][1])+'px,'+(msey+clips[z0][2]+2)+'px,'+(msex+clips[z0][0])+'px)';
}
if (mag.style.display='none'){
mag.style.display='block';
}
},
move:function(e){
var oop=this,mse=this.mse(e),obj=this.obj,pos=this.pos(obj),osx=this.radx,osy=this.rady;
if (mse[0]>pos[0]-osx/2+this.posx && mse[0]<pos[0]+obj.offsetWidth+osx-this.mosx && mse[1]>pos[1]-osy/2+this.posy && mse[1]<pos[1]+obj.offsetHeight+osy-this.mosy){
this.msex=mse[0];
this.msey=mse[1];
this.clip();
}
else {
this.mag.style.display='none';
clearTimeout(this.to);
}
},
addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
},
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 docs=[document.body.scrollLeft,document.body.scrollTop];
if (!document.body.scrollTop){
docs=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
}
return [e.clientX+docs[0],e.clientY+docs[1]];
}
return [e.pageX,e.pageY];
},
// Optional Zoom Code.
zoominit:function(o,mag,zoom,szx,szy){
var limits=o.Limits,zevts=o.Events,inc,z1,cnt=0,mes=o.Message,note;
if (typeof(limits)=='object'&&limits.constructor==Array&&typeof(limits[0])=='number'&&typeof(limits[1])=='number'&&limits[1]-limits[0]>1){
limits[0]=Math.max(limits[0],1);
inc=typeof(limits[2])=='number'&&limits[2]<=1?limits[2]:.25;
this.zary=[];
this.zcnt=0;;
for (var z1=limits[0];z1<=limits[1];z1+=inc){
if (z1>zoom-inc/2&&z1<zoom+inc/2){
this.zcnt=cnt;
}
this.zary.push(z1);
cnt++;
}
if (typeof(zevts)!='boolean'||zevts){
if (typeof(mes)!='boolean'||mes){
mag.title='Left Click to Zoom In - Right Click to Zoom Out'
}
this.addevt(mag,'mouseup','Zoom');
this.addevt(mag,'contextmenu','Zoom');
}
}
},
Zoom:function(e){
if (this.zary){
var ud=0,zm=this.zoom,z0=0,objs=this.objs;
if (typeof(e)=='object'){
ud=e.type=='mouseup'?1:-2;
}
else if (typeof(e)=='number'){
ud=e>0?1:-1;
}
this.zcnt+=ud;
this.zcnt=Math.min(Math.max(this.zcnt,0),this.zary.length-1);;
zm=this.zary[this.zcnt];
for (;z0<objs.length;z0++){
objs[z0].style.width=this.sw*zm+'px';
objs[z0].style.height=this.sh*zm+'px';
}
this.zoom=zm;
this.clip();
}
if (e.preventDefault) e.preventDefault();
return false;
}
}
/*]]>*/
</script>
</head>
<body>
<img id="tst" src="http://www.dynamicdrive.com/dynamicindex4/beach.jpg" width="350" height="233"/>
<script type="text/javascript">
/*<![CDATA[*/
M=new MagnifyEllipse({
ID:'tst', // the unique ID name of the parent Node. (string)
MagnifierRadius:[35,35], // the X and Y radius of the magnifier object(see Note 1). (array)
SmallImage:[350,233], // the width and height of the small image(see Note 2). (array)
LargeImage:['http://www.dynamicdrive.com/dynamicindex4/beach.jpg',2], // the src of the large image and initial magnification of the large image(see Note 3). (array)
MagnifierOffset:[-35,-37], //(optional) the magnifier object offset X and Y from the mouse(see Note 4). (array, default = no offsets)
OffsetDisplay:false, //(optional) true = offset the magnifier from the tracking coordinates. (boolean, default = false)
MagnifierImage:['http://www.vicsjavascripts.org.uk/StdImages/Glass.gif',80,82], //(optional) the foreground image src and size(see Note 5). (array, default = no foreground image)
zIndex:201, //(optional) the magnifier must be positioned over other page elements. (number, default = 101)
Zoom:{ //(optional) an object defining the zoom options of the large image(see Note 6). (object, default = no zoom)
Limits:[1,4,.25], // the zoom criteria large image(see Note 6). (array, default = no zoom)
Events:true, //(optional) true = add events to the magnifier to zoom in and out.(see Note 6). (boolean, default = true)
Message:true //(optional) true = display a instruction message on mouse near of the small image. (boolean, default = true)
}
});
/*]]>*/
</script></body>
</html>
Magnify Ellipse.
Reply With Quote
Bookmarks