jQuery Simple ZoomGlass plugin

Description

This is a simple jQuery plug-in for zooming images. Most of the functionalities come from jquery lens plugin and jquery clippedImage. Complex application always come from simple example.

Demonstration

<center><table border="0"><tr><td>
<img id="myImg" src="/images/christmas-small.jpg" width="256" height="192" style="border:2px solid #000"/>
</td><td>
<div id="clipped-image" style="border:2px solid #000"></div></td></tr></table></center>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.simple.zoomGlass.js"></script>
<script type="text/javascript">
(function($){
	$("document").ready(function(){
		$("#myImg").addZoomGlass("#clipped-image","/images/christmas-large.jpg",50,50,200,200);
	});
})(jQuery);
</script>

jQuery Plugin Source Code

The following is the source code of the jQuery Plugin.

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

Download the plugin

Click the link for downloading the plugin.

Copyright and licensing

All the plugin source codes and the examples are copyright of C. F., Wong
Please feel free to use any code listed in this page, they are licensed under the MIT License:
http://www.opensource.org/licenses/mit-license.php