PDA

View Full Version : Magnify Ellipse.



vwphillips
02-28-2011, 11:28 AM
1) CODE TITLE:

Magnify Ellipse.

2) AUTHOR NAME/NOTES:

by Vic Phillips. http://www.vicsjavascripts.org.uk/

3) DESCRIPTION:

Most suitable for small to medium sized Images.
The script allows any image on your page to be magnified when the mouse rolls over it.
The magnified section is displayed in an ellipse tracking the mouse position.
Options allow:
the magnified ellipse may be offset from the mouse position,
an image to be positioned over the ellipse and may sized greater than the ellipse diameter,
the 'large' image may be zoomed in and out by left and right click if the mouse
or by inline event calls,
the magnifier may be over or offset from the tracking coordinates,
an instruction message may be displayed on mouse near of the 'small' image.

The Functional Code size is 5.59K with 'Zoom' in and out and 4.25K without.

4) URL TO CODE:

http://www.vicsjavascripts.org.uk/MagnifyEllipse/MagnifyEllipse.htm

or, ATTACHED BELOW (see #3 in guidelines below):

djr33
02-28-2011, 06:56 PM
I like it, but I don't like that the zoomed in version is always pixelated. Is there a way to make it have a clear image in the ellipse?

vwphillips
02-28-2011, 10:11 PM
That is down the the quality of the 'large' images, I need to limit the size of the I use because of limited space on the server, zoom down to 1 to see the original quality.

djr33
02-28-2011, 10:34 PM
So you're saying it's possible to have much higher quality images if your server has the space? That's fine then.

vwphillips
03-01-2011, 09:43 AM
perhapse I should use your images?


<!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>