Image Cropping jQuery Plugin
JavaScript HTML CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
images
README.markdown
demo.html
jWindowCrop.css
jquery.jWindowCrop.js

README.markdown

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
targetWidthinteger320no Width in pixels of the cropping window
targetHeightinteger180no Height in pixels of the cropping window
onChangefunctionfunction(){}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.
zoomStepsinteger10no Number of incremental zoom steps. With the default of 10, you have to click the zoom-in button 9 times to reach 100%.
loadingTextstring"Loading..."no Text (can be HTML) to display within frame until image is loaded.
smartControlsbooleantrueno If true, controls will hide on mouseleave and appear on mouseenter.
showControlsOnStartbooleantrueno 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