jQuery Plugin for Image Zoom and Rotation Plugin - iviewer
File Size: | 285 KB |
---|---|
Views Total: | 35356 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.