jQuery Plugin for Image Zoom and Rotation Plugin - iviewer

File Size: 285 KB
Views Total: 35625
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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:

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.