jQuery ClippedImage plugin

Description

This is a jQuery plug-in for displaying clipped image by providing the url, width, height, left and top the image being clipped.

Demonstration

<p align="center"><img src="/images/christmas-small.jpg" width="256" height="192" style="border:2px solid #000"/></p>
<center><div id="clipped-image" style="border:2px solid #000"></div></center>
<script type="text/javascript">
(function($){
	$("document").ready(function(){
		$("#clipped-image").addClippedImage("/images/christmas-large.jpg",200,200)
		.clipImageTo(200,180);
	});
})(jQuery);
</script>

jQuery Plugin Source Code

The following is the source code of the jQuery Plugin.

<script type="text/javascript">
(function($){
	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.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
	}
})(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