JQzoom
Product image zooming effect
HTML
<a href="http://c3.neweggimages.com.cn/neweggpic2/neg/P800/A1R-184-00Z.jpg" class="jqzoom"><img src="http://c3.neweggimages.com.cn/neweggpic2/neg/P640/A1R-184-00Z.jpg" alt="" /></a>
CSS
.jqZoomPup{
background:#fff;
-moz-opacity:.5;
filter:alpha(opacity=50);
opacity:.5;
}
.jqZoomWindow{
border: 2px solid #f60;
background:#fff;
}
JavaScript
// JavaScript Document
/**
Last Update: 2013.05.17
Update Logs:
1¡¢Fix no image bugs in FF & Webkit;
2¡¢Fix Zoom Window appears at left side
**/
(function(A){
A.fn.jqzoom=function(B){
var C={
zoomWidth:400,
zoomHeight:400,
xOffset:10,
yOffset:0,
showEffect:"show",
hideEffect:"hide",
fadeinSpeed:"fast",
fadeoutSpeed:"slow"
};
B=B||{};
A.extend(C,B);
return this.each(function(){
var U=A(this);
var X=A("img",this);
var L=new Q(X);//Mid Img
var S={};
L.loadimage();
var I=0;
var R=0;
var E=new P(U[0].href);//Big Img
var V=new J();//Lens
var M={};
var K=false;
var W={};
var T=null;
var F=false;
var O={};
var N=0;
A(this).click(function(){return false});
U.css({cursor:"crosshair",display:"block"});
if(U.css("position")!="absolute"&&U.parent().css("position")){
U.css({cursor:"crosshair",position:"relative",display:"block"})
}
if(U.parent().css("position")!="absolute"){
U.parent().css("position","relative")
}
if(A.browser.safari||A.browser.opera){
A(X).css({position:"absolute",top:"0px",left:"0px"})
}
A(this).hover(
function(Y){
X=A("img",this);
L=new Q(X);//Mid Img
E=new P(U[0].href);//Big Img
L.loadimage();
O.x=Y.pageX;
O.y=Y.pageY;
if(typeof(S.w)=="undefined"){return}
H()
},
function(){
G()
}
);
//Hover In Function
function H(){
if(!F){
F=true;
if(!E||A.browser.safari){
E=new P(U[0].href)
}
if(!K||A.browser.safari){
E.loadimage()
}
else{
T=new D();//Zoom Window
T.activate();
V=new J;//Lens
V.activate()
}
U[0].blur();
return false
}
}
//Hover Out Function
function...