john.doe

# Forms > Image Editor

Please note: This plugin is non-responsive

## jcrop

#### API Interface — real-time API example

Experimental shader active. Jcrop now includes a shading mode that facilitates building better transparent Jcrop instances. The experimental shader is less robust than Jcrop's default shading method and should only be used if you require this functionality.
View jcrop's documentation by going to: http://deepliquid.com/content/Jcrop.html
Option Toggles
Option Toggles
Aspect ratio minSize/maxSize setting
Allow new selections Selection can be moved Resizable selection
Change Image

#### Default Behaviour

This example demonstrates the default behavior of Jcrop.
Since no event handlers have been attached it only performs the cropping behavior.

#### Basic Handler — basic form integration

An example with a basic event handler. Here we've tied several form values together with a simple event handler invocation. The result is that the form values are updated in real-time as the selection is changed using Jcrop's onChange handler.
X1 Y1 X2 Y2 W H

#### Aspect Ratio w/ Preview Pane — nice visual example

An example implementing a preview pane. Obviously the most visual demo, the preview pane is accomplished entirely outside of Jcrop with a simple jQuery-flavored callback. This type of interface could be useful for creating a thumbnail or avatar. The onChange event handler is used to update the view in the preview pane.

#### Animation/Transitions — animation/fading demo

Experimental shader active. Jcrop now includes a shading mode that facilitates building better transparent Jcrop instances. The experimental shader is less robust than Jcrop's default shading method and should only be used if you require this functionality.
Enable fading (bgFade: true) Use experimental shader (shade: true)

#### Styling Example — style Jcrop dynamically with CSS

Manipulate classes

- Mail 14
- Calendar
- Maps
- Invoice 99
- Gallery
- My Profile