Skip to content

Mark-Hetherington/jWindowCrop

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

52 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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
cropX / cropYintegernullno 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 / cropHintegernullno 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)
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.

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

About

Image Cropping jQuery Plugin

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 95.1%
  • CSS 4.9%