Description

Easy to use jQuery plugin for zoom & pan image cropping.

Demo

Visit: http://www.tmatthew.net/jwindowcrop

Usage

// minimum
$('img.crop_me').jWindowCrop();

// typical
$('img.crop_me').jWindowCrop({
	targetWidth:300,
	targetHeight:300,
	onChange: function(result) {
		console.log($(this).attr('id'));
		console.log('x: '+result.cropX);
	}
});

Options

Option	Type	Default	Required	Description
targetWidth	integer	320	no	Width in pixels of the cropping window
targetHeight	integer	180	no	Height in pixels of the cropping window
onChange	function	function(){}	no	Callback function that gets called whenever the values change. cropX, cropY, cropW, cropH, mustStretch (boolean) values are passed to this function in a hash. Use the this keyword in the function for a reference to the element that was updated.
zoomSteps	integer	10	no	Number of incremental zoom steps. With the default of 10, you have to click the zoom-in button 9 times to reach 100%.
loadingText	string	"Loading..."	no	Text (can be HTML) to display within frame until image is loaded.
smartControls	boolean	true	no	If true, controls will hide on mouseleave and appear on mouseenter.
showControlsOnStart	boolean	true	no	If true, controls will be hidden on start. Note: Do not set both this and smartControls to false.

Advanced

The structure for this plugin comes from http://starter.pixelgraphics.us/. An object is created for each dom element jWindowCrop is initialized on. A reverse reference to that object can be accessed like so:

var jwc = $('img#beach').getjWindowCrop();

You then have access to all the properties and methods used for that specific element.

Questions

Email tyler at tmatthew dot net