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
cropX / cropY	integer	null	no	Specifies the initial start position. If you've previously stored the results of JWC you can set these values (along with cropH and cropW) to what they were in order to continue where you left off. You must specify both cropX and cropY to use this feature (and it won't make much sense without cropW and cropH).
cropW / cropH	integer	null	no	Specifies the initial zoom level. If you've previously stored the results of JWC you can set these values (along with cropX and cropY) to what they were in order to continue where you left off. You must specify both cropW and cropH to use this feature (and it won't make much sense without cropX and cropY)
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.

Methods

Method	Return	Description
reset()	void	Re-initializes the cropping area, including re-zooming and re-centering the image, and adjusting the canvas size to the new values in options.targetWidth and options.targetHeight (if changed).
destroy()	void	Undoes everything init() does and returns the DOM to it's initial state.

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