Thumbnail Preview | Jcrop Demos

# Thumbnail Preview

Auto-hide Thumbnail Preview

### 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.