Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Image Cropping jQuery Plugin
JavaScript CSS
branch: master

This branch is 12 commits ahead, 2 commits behind tybro0103:master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
images
README.markdown
bower.json
demo.html
jWindowCrop.css
jquery.jWindowCrop.js

README.markdown

Description

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

Differences from original fork

We moved the zoom controls below the image instead of letting them float on top of the image

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

Something went wrong with that request. Please try again.