jQuery Lens plugin

Description

This is a jQuery plug-in displaying a lens and detecting the relative mouse position inside an image.

Demonstration

left:0, top:0

<p align="center">
<img id="myPic" src="/images/christmas-small.jpg" width="256" height="192" style="border:2px solid #000"/></p>
<p>left:<span id="left">0</span>, top:<span id="top">0</span></p>
<script type="text/javascript" src="/js/jquery.lens.js"></script>
<script type="text/javascript">
(function($){
$(document).ready(function(){
	$("#myPic").addLens(function(){
		$("#left").text($(this).data("Lens").relative.left);
		$("#top").text($(this).data("Lens").relative.top);
	});
});
})(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||100,h=height||100;
			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();
	};
})(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