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[*/
#example {
position:absolute;left:200px;top:200px;width:248px;height:122px;border:solid black 1px;background-Color:#FFCC66;background-Image:url(http://3595.is3.ntz.de/shopbilder/J1.png);
}
/*]]>*/
</style></head>
<body>
<div id="example" >
</div>
<script type="text/javascript">
/*<![CDATA[*/
// Image Magnify (18-Febuary-2011)
// by Vic Phillips http://www.vicsjavascripts.org.uk/
// ****** Functional Code(4.01K) - NO NEED to Change.
function zxcMagnify(o){
var obj=document.getElementById(o.ID),div,mag,large,ratio=[o.LargeImage[1],o.LargeImage[2]],small,w=o.SmallImage[1],smallheight=o.SmallImage[2],z0=0,deg,r=Math.PI/180,sz=o.MagnifierImage[1],rad=sz/2,x,z1=0;
div=document.createElement('DIV');
div.style.position='absolute';
div.style.overflow='hidden';
div.style.zIndex='101';
div.style.width=sz+'px';
div.style.height=sz+'px';
mag=document.createElement('IMG');
mag.src=o.MagnifierImage[0];
mag.style.position='absolute';
mag.style.zIndex='4';
mag.style.left='0px';
mag.style.top='0px';
mag.style.width=sz+'px';
mag.style.height=sz+'px';
large=document.createElement('IMG');
large.src=o.LargeImage[0];
large.style.position='absolute';
large.style.zIndex='0';
large.style.width=ratio[0]+'px';
large.style.height=ratio[1]+'px';
large.style.top='0px';
large.style.left='0px';
div.appendChild(large);
div.appendChild(mag);
document.body.appendChild(div);
small=document.createElement('IMG');
small.src=o.SmallImage[0];
small.width=w;
small.height=smallheight;
small.style.position='absolute';
small.style.zIndex='3';
small.style.left=300+'px';
small.style.top=-2+'px';
div.style.backgroundImage='url('+small.src+')';
div.style.backgroundRepeat='no-repeat';
this.objary=[];
for (;z0<smallheight;z0++){
this.objary[z0]=[]
small=small.cloneNode(false);
div.appendChild(small);
this.objary[z0][0]=small;
small=small.cloneNode(false);
div.appendChild(small);
this.objary[z0][1]=small;
}
this.clipary=[];
for (;z1<sz;z1++){
deg=z1*180/sz+90;
x=rad+Math.floor(rad*Math.cos(deg*r));
this.clipary[sz-z1]=[x,sz-x,Math.floor(rad*Math.sin(deg*r))+rad];
}
this.bgcolor=o.BackgroundColor;
this.ratio=[ratio[0]/small.width,ratio[1]/small.height];
this.sz=sz;
this.w=w;
this.obj=obj;
this.div=div;
this.large=large;
div.style.display='none';
this.addevt(document,'mousemove','move');
}
zxcMagnify.prototype={
clip:function(lft,top){
var objs=this.objary,clips=this.clipary,w=this.w,z0=0,obj,pos=this.pos(this.obj),div=this.div,os=this.sz/2,large=this.large,largelft=-lft*this.ratio[0]-os,largetop=-top*this.ratio[1]-os;
div.style.left=pos[0]+lft+'px';
div.style.top=pos[1]+top+'px';
div.style.backgroundPosition=-lft+'px '+(-top)+'px';
div.style.backgroundColor=this.bgcolor;
large.style.left=largelft+'px';
large.style.top=largetop+'px';
if (largelft>os*2||largelft<-large.width||largetop>os*2||largetop<-large.height){
div.style.backgroundColor='transparent';
}
for (;z0<objs.length;z0++){
obj=objs[z0];
if (clips[z0]){
obj[0].style.clip='rect('+(clips[z0][2]+top)+'px,'+(clips[z0][0]+lft)+'px,'+(clips[z0][2]+top+2)+'px,0px)';
obj[0].style.left=-lft+'px';
obj[0].style.top=-top+'px';
obj[1].style.clip='rect('+(clips[z0][2]+top)+'px,'+w+'px,'+(clips[z0][2]+top+2)+'px,'+(clips[z0][1]+lft)+'px)';
obj[1].style.left=-lft+'px';
obj[1].style.top=-top+'px';
}
}
},
move:function(e){
var mse=this.mse(e),obj=this.obj,pos=this.pos(obj),sz=this.sz/2,lft,top;
if (mse[0]>pos[0]-sz&&mse[0]<pos[0]+obj.offsetWidth+sz&&mse[1]>pos[1]-sz&&mse[1]<pos[1]+obj.offsetHeight+sz){
this.div.style.display='block';
this.clip(mse[0]-pos[0]-sz,mse[1]-pos[1]-sz);
}
else {
this.div.style.display='none';
}
},
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];
},
docs:function(){
if (!document.body.scrollTop){
return [document.documentElement.scrollLeft,document.documentElement.scrollTop];
}
return [document.body.scrollLeft,document.body.scrollTop];
}
}
new zxcMagnify({
ID:'example',
SmallImage:['http://3595.is3.ntz.de/shopbilder/J1.png',248,122],
LargeImage:['http://3595.is3.ntz.de/shopbilder/originale/J1.png',558,274],
MagnifierImage:['http://3595.is3.ntz.de/images/zoomer_lupe.png',100],
BackgroundColor:'#FFCC66'
})
/*]]>*/
</script>
</body>
</html>
DD Power Zoomer
Reply With Quote
Originally Posted by vwphillips
Bookmarks