Simple jQuery Image Crop and Zoom Plugin - ZoomCrop

ZoomCrop is a tiny jQuery & jQuery UI based crop utility which allows you to zoom, pan and crop an image with ease.

How to use it:

1. Include the jQuery and jQuery UI in the document.

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />	
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>

2. Include the jQuery ZoomCrop plugin after jQuery library.

<link rel="stylesheet" href="jquery.zoomcrop.css">
<script src="jquery.zoomcrop.js"></script>

3. Create a container for the image cropper.

<div id="cropper"></div>

4. Initialize the plugin and set the image you wish to crop.

$(function(){
$('#cropper').ZoomCrop({
initialZoom : 0.0,
image : 'crop.jpg',
realWidth : 0,
updated : function(size, crop, position){}
});
});

---

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