Easy to use jQuery plugin for zoom & pan image cropping.
We moved the zoom controls below the image instead of letting them float on top of the image
Visit: http://www.tmatthew.net/jwindowcrop
// 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);
}
});
| 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. |
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.
Email tyler at tmatthew dot net