Built-in Preview Support

Thumbnail previews just got much easier! Used to be, if you wanted to include a dynamic preview with Jcrop, you had to write client code. A number of people had difficulty adapting that code to their needs. No more! Now just attach a Thumbnailer object. Pass in the Jcrop instance, desired width, and height, and you're done.

Invocation Code (for this demo)

$('#target').Jcrop({
  aspectRatio: 1,
  setSelect: [ 175, 100, 400, 300 ]
},function(){
  var jcrop_api = this;
  new $.Jcrop.component.Thumbnailer(jcrop_api,{ width: 130, height: 130 });
});

The constructor takes a reference to the Jcrop instance, and allows passage of various options such as initial width and height.

Customize Position and Styling with CSS

.jcrop-thumb {
  top: -25px;
  right: 20px;
  border: 1px black solid;
}

The absolutely-positioned, sized thumbnail is appended to the Jcrop instance container automatically. It can then be positioned relatively to the container by using top/left/bottom/right CSS values. Styling such as a border or a box shadow can be added if desired.

Additional Features

• Can be locked to an individual Selection object.
• Can be resized using resize(w,h) method.