jQuery Plugin for Image Zoom and Rotation Plugin - iviewer

iviewer is a jQuery UI based jQuery plugin that allows you to zoom in/out, rotate and move images in area by the mouse on your web page.

Basic Usage:

1. Include jQuery library and iviewer.js in the head section of your web page

<script type="text/javascript" src="jquery.js" ></script>
<script type="text/javascript" src="jquery.iviewer.js" ></script>

2. Include necessary jQuery UI javascript files

<script type="text/javascript" src="jqueryui.js" ></script>
<script type="text/javascript" src="jquery.mousewheel.min.js" ></script>

3. Include jQuery iviewer CSS

<link rel="stylesheet" href="jquery.iviewer.css" />

4. Markup

<div id="viewer" class="viewer"></div>

5. Call the plugin with options

<script type="text/javascript">
var $ = jQuery;
$(document).ready(function(){
      var iv1 = $("#viewer").iviewer({
           src: "test_image.jpg", 
           update_on_resize: false,
           zoom_animation: false,
           mousewheel: false,
           onMouseMove: function(ev, coords) { },
           onStartDrag: function(ev, coords) { return false; }, //this image will not be dragged
           onDrag: function(ev, coords) { }
      }); 
});
</script>

More Examples:

• Demo 1
• Demo 2
• Demo 3

Change log:

2014-06-27

• Fixed: Image is loaded twice

2014-05-03

• IE7&8 fixes
• remove ui nodes on destroy
• gallery-like functionality for iviewer-lightbox test page

2014-05-01

• fixed IE8 issue with for in loop

v0.7.9 (2013-11-27)

• DoubleClick event added
• Zoom on double click
• Move more events to the iviewer namespace

---

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