...

View Full Version : Is there a plugin to get the effect?



runeveryday
07-06-2012, 05:37 AM
http://phplist.xxmn.com/1.html

put the mouse over the product image there is a mask on the image. on its right. shows the image. when move the mask. the image on the right shows the according part. thank you

VIPStephan
07-06-2012, 08:11 AM
That’s a zoom effect. Shouldn’t be hard to find something if you use the right search keywords.

vwphillips
07-06-2012, 12:07 PM
<!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[*/
.mask {
position:absolute;z-Index:101;width:200px;height:200px;background-Color:#FFFFCC;
/* Moz */
opacity: .5;
/* IE5-7 */
filter: alpha(opacity=50);
/* IE8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

.viewer {
position:absolute;z-Index:101;left:550px;top:20px;border:solid red 1px;
}

/*]]>*/
</style></head>

<body>
<img src="http://ftcline.com/s/mic/12037/1.jpg_small.jpg" onmouseup="zxcViewer.swap('mag1','http://ftcline.com/s/mic/12037/1.jpg','');"/>
<img src="http://ftcline.com/s/mic/12037/2.jpg_small.jpg" onmouseup="zxcViewer.swap('mag1','http://ftcline.com/s/mic/12037/2.jpg','');"/>
<!--
where:
parameter 0 = the id of the featured image (string)
parameter 1 = the src of the featured image (string)
parameter 2 = (optional) the src of the viewer image (string, default = the src of the featured image)
-->

<img id="mag1" src="http://ftcline.com/s/mic/12037/1.jpg" />


<script type="text/javascript">
/*<![CDATA[*/
// Image Viewer (06-July-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/


var zxcViewer={

init:function(o){
var img=document.getElementById(o.ImageID),msk=document.createElement('DIV'),viewer=document.createEleme nt('DIV'),m=o.MagnifyBy,m=typeof(m)=='number'&&m<=1?m:1.5,nimg=[new Image(),new Image()],obj;
msk.className=o.MaskClass;
msk.style.left='-1000px';
msk.style.top='-1000px';
document.body.appendChild(msk);
var mw=this.int(msk,'width'),mh=this.int(msk,'height'),vimg=img.cloneNode(false);
viewer.className=o.ViewerClass;
viewer.style.overflow='hidden';
viewer.style.visibility='hidden';
viewer.style.width=mw*m+'px';
viewer.style.height=mh*m+'px';
vimg.style.position='absolute';
vimg.src=o.ViewerImageSRC||img.src;
viewer.appendChild(vimg);
document.body.appendChild(viewer);
nimg[0].src=img.src;
nimg[1].src=vimg.src;
obj={
nimg:nimg,
img:img,
msk:msk,
mskw:mw,
mskh:mh,
viewer:viewer,
vimg:vimg,
m:m
}
this['zxc'+o.ImageID]=obj;
this.load(obj);
},

move:function(e,o){
var mse=this.mse(e),p=this.pos(o.img),lft,top;
if (mse[0]>p[0]&&mse[0]<p[0]+o.iw&&mse[1]>p[1]&&mse[1]<p[1]+o.ih){
o.viewer.style.visibility='visible';
lft=Math.min(Math.max(mse[0]-o.mskw/2,p[0]),p[0]+o.iw-o.mskw);
top=Math.min(Math.max(mse[1]-o.mskh/2,p[1]),p[1]+o.ih-o.mskh);
o.msk.style.left=lft+'px';
o.msk.style.top=top+'px';
o.vimg.style.left=(lft-p[0])/(o.iw-o.mskw)*o.vx+'px';
o.vimg.style.top=(top-p[1])/(o.ih-o.mskh)*o.vy+'px';
}
else if (o.viewer.style.visibility=='visible'){
o.viewer.style.visibility='hidden';
o.msk.style.left='-1000px';
}
},

swap:function(id,src,vsrc){
var o=this['zxc'+id];
if (o){
clearTimeout(o.dly);
o.nimg=[new Image(),new Image()];
o.nimg[0].src=src;
o.nimg[1].src=vsrc||src;
this.load(o);
}
},

load:function(o){
for (var oop=this,z0=0;z0<o.nimg.length;z0++){
if (o.nimg[z0].width<40){
o.dly=setTimeout(function(){ oop.load(o); },100);
return;
}
}
if (!o.init){
o.iw=o.img.width;
o.ih=o.img.height
o.vimg.style.width=o.iw*o.m+'px';
o.vimg.style.height=o.ih*o.m+'px';
o.vx=o.mskw*o.m-o.iw*o.m;
o.vy=o.mskh*o.m-o.ih*o.m;
this.addevt(document,'mousemove','move',o);
o.init=true;
}
else {
o.img.src=o.nimg[0].src;
o.vimg.src=o.nimg[1].src;
}
},

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];
},

pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
},


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); });
},

int:function(o,p){
return parseInt(this.style(o,p));
},

style:function(o,p){
if (o.currentStyle){
return o.currentStyle[p.replace(/-/g,'')];
}
return document.defaultView.getComputedStyle(o,null).getPropertyValue(p.toLowerCase());
}

}

zxcViewer.init({
ImageID:'mag1', // the unique ID name of the featured image. (string)
MaskClass:'mask', // the class name of the image mask. (string)
ViewerClass:'viewer', // the class name of the viewer DIV. (string)
ViewerImageSRC:'http://ftcline.com/s/mic/12037/1.jpg', // the src viewer image. (string, default = the featured image src)
MagnifyBy:1.5 //(optional) the magnification of the viewer image. (number, mimimum = 1, default = 1.5)
});

/*]]>*/
</script>
</body>

</html>

or
http://www.vicsjavascripts.org.uk/ImageViewerII/ImageViewerII.htm

runeveryday
07-07-2012, 07:10 AM
[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD

Good. many thanks. if i want to change the size of the mask or the image on the right. how do i do? thank you

vwphillips
07-07-2012, 08:17 AM
the mask size is set in the .mask class rule, the viewer is the mask size*magnification



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum