Revision: 22123
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at January 3, 2010 21:24 by cloudgen
Initial Code
<script type="text/javascript">
(function($){
function parseCSS(obj,css){
var r=0;
obj.css(css).replace(/\b(\d+)px\b/,function(s,t){r=parseInt(t)});
return r;
}
function Lens(target,width,height,callBack){
if(target){
var w=width||50,h=height||50;
this.callBack=(typeof callBack=="function")?callBack:function(){};
this.target=$(target);
this.disabled=false;
this.callBack=callBack||function(){};
this.anchor=this.target.wrap(document.createElement("a")).closest("a").data("Lens",this)
.unbind("mouseover").unbind("mouseout").unbind("mousemove")
.hover(function(e){
$(this).data("Lens").show(e)
},function(){
$(this).data("Lens").hide()
}).mousemove(function(e){
$(this).data("Lens").show(e)
});
var jNode=$('<div style="background-color:#FFF;-moz-opacity:0.6;opacity:0.6;filter:alpha(opacity=60);position:absolute;z-index:900;'
+'cursor:crosshair;"></div>').css({width:w,height:h}).appendTo(this.anchor).hide();
this.jNode=jNode.css({top:this.target.offset().top,left:this.target.offset().left});
this.offset={top:this.target.offset().top+parseCSS(this.target,'borderTopWidth'),left:this.target.offset().left+parseCSS(this.target,'borderLeftWidth'),width:w,height:h};
this.adjustedTarget={top:this.target.offset().top+parseCSS(this.target,'borderTopWidth'),left:this.target.offset().left+parseCSS(this.target,'borderLeftWidth')}
this.target.data("Lens",this);
}
}
Lens.prototype.remove=function(){
this.jNode.remove();
};
Lens.prototype.show=function(e){
if(!this.disabled){
this.mouseX=e.pageX;
this.mouseY=e.pageY;
this.offset.left=parseInt(this.mouseX-this.offset.width/2);
this.offset.left=(this.offset.left<this.adjustedTarget.left)?this.adjustedTarget.left:this.offset.left;
this.offset.left=(this.offset.left>this.adjustedTarget.left+this.target.width()-this.offset.width)
?this.adjustedTarget.left+this.target.width()-this.offset.width:this.offset.left;
this.offset.top=parseInt(this.mouseY-this.offset.height/2);
this.offset.top=(this.offset.top<this.adjustedTarget.top)?this.adjustedTarget.top:this.offset.top;
this.offset.top=(this.offset.top>this.adjustedTarget.top+this.target.height()-this.offset.height)
?this.adjustedTarget.top+this.target.height()-this.offset.height:this.offset.top;
this.jNode.css({top:this.offset.top,left:this.offset.left});
this.relative={top:parseInt(this.offset.top-this.adjustedTarget.top),left:parseInt(this.offset.left-this.adjustedTarget.left)};
this.jNode.show();
if(typeof this.callBack=="function") this.callBack.apply(this.target);
}
};
Lens.prototype.hide=function(){
this.jNode.hide();
};
Lens.prototype.disable=function(){
this.disabled=true;
};
Lens.prototype.enable=function(){
this.disabled=false;
};
$.fn.addLens=function(width,height,callBack){
var w,h,c;
if(typeof width=="function") c=width;
else c=(typeof callBack=="function")?callBack:function(){};
w=(typeof width!="number") ?100:width;
h=(typeof height!="number") ?100:height;
new Lens(this,w,h,c);
};
$.fn.showLens=function(){
this.data("Lens").show();
};
$.fn.hideLens=function(){
this.data("Lens").hide();
};
$.fn.removeLens=function(){
this.data("Lens").remove();
};
function ClippedImage(target,src,width,height,top,left){
this.clipped={};
this.clipped.left=left||0;
this.clipped.top=top||0;
this.clipped.width=width||100;
this.clipped.height=height||100;
this.src=src;
this.target=$(target).data("ClippedImage",this).css({overflow:"hidden",width:width+"px",height:height+"px"}).
append('<div style="position:relative;left:'+(0-left)+'px;top:'+(0-top)+'px;"><img border="0" src="'+this.src+'"/></div>');
return this
}
ClippedImage.prototype.clipTo=function(top,left,width,height){
this.clipped.left=left||this.clipped.left;
this.clipped.top=top||this.clipped.top;
this.clipped.width=width||this.clipped.width;
this.clipped.height=height||this.clipped.height;
this.target.find("div").css({left:(0-this.clipped.left)+"px",top:(0-this.clipped.top)+"px",
width:this.clipped.width+"px",height:this.clipped.height+"px"});
return this
}
$.fn.addZoomGlass=function(obj,largeImg_url,width,height,clippedImageWidth,clippedImageHeight){
var w,h;
w=(typeof width!="number") ?50:width;
h=(typeof height!="number") ?50:height;
var h_scale=clippedImageWidth*1.0/width;
var v_scale=clippedImageHeight*1.0/height;
var ci=$(obj).addClippedImage(largeImg_url,clippedImageWidth,clippedImageHeight).data("ClippedImage");
ci.target.find("img").width(parseInt(this.width()*h_scale)).height(parseInt(this.height()*v_scale));
new Lens(this,w,h,function(){
var left=parseInt($(this).data("Lens").relative.left*h_scale);
var top=parseInt($(this).data("Lens").relative.top*v_scale);
ci.clipTo(top,left)
});
};
$.fn.addClippedImage=function(src,width,height,top,left){
new ClippedImage(this,src,width,height,top,left);
return this
}
$.fn.clipImageTo=function(top,left,width,height){
this.data("ClippedImage").clipTo(top,left,width,height);
return this
}
$.fn.addLens=function(width,height,callBack){
var w,h,c;
if(typeof width=="function") c=width;
else c=(typeof callBack=="function")?callBack:function(){};
w=(typeof width!="number") ?50:width;
h=(typeof height!="number") ?50:height;
new Lens(this,w,h,c);
};
$.fn.showLens=function(){
this.data("Lens").show();
};
$.fn.hideLens=function(){
this.data("Lens").hide();
};
$.fn.removeLens=function(){
this.data("Lens").remove();
};
})(jQuery);
</script>
Initial URL
http://cloudgen.w0ng.hk/jquery/simple.zoomGlass.php
Initial Description
This is a zoom glass effect. Simply download jQuery and the plugin and apply the code as described in http://cloudgen.w0ng.hk/jquery/simple.zoomGlass.php You can found the sample in the page, too.
Initial Title
jQuery Simple ZoomGlass plugin
Initial Tags
jquery
Initial Language
JavaScript