jQuery Plugin For Zoom & Pan Image Cropping - jQCrop

jQCrop is a lightweight and smart jQuery image cropping plugin that intelligently crops and auto places a large image to allows the visitor to zoom and drag to-pan it.

See also:

• jQuery Plugin For Cropping Images - Fakecrop
• jQuery Plugin for Image Cropping Functionality - imgAreaSelect

Basic Usage:

1. Include the latest jQuery library and jQuery jQCrop plugin on the web page

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jQcrop.js"></script>

2. Include required jQuery jQCrop stylesheet to style the plugin

<link href="jQcrop.css" rel="stylesheet" type="text/css">

3. Insert a large image in your html document

<img src="dock.jpg" width="1920" height="1200" class="crop">

4. The javascript. With fallback for image which is too small to crop

<script type="text/javascript">
$( function () {
$('img.crop').jQcrop({
width: 400,
height: 300
}).on('crop.jQcrop', function(e, data) {
console.log('coordinates: ' + data);
if (data.stretch) {
console.log('image too small!!!!');
}
});
} );
</script>

---

This awesome jQuery plugin is developed by terebentina. For more Advanced Usages, please check the demo page or visit the official website.