jQuery Plugin For Image Zoom In and Out With Mousewheel - imgViewer

File Size: 785 KB
Views Total: 53513
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin For Image Zoom In and Out With Mousewheel - imgViewer

imgViewer is a simple and flexible jQuery plugin that allows to zoom in and out an image with mousewheel or drag it with mouse click.

imgViewer2 is now available.

How to use it:

1. Include jQuery library, jQuery UI and jQuery imgViewer on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="libs/jquery-ui.js"></script>
<script type="text/javascript" src="src/imgViewer.js"></script>

2. Include mousewheel plugin and other required libraries on the pgae

<script type="text/javascript" src="libs/jquery.mousewheel.min.js"></script>
<script src="jquery.fs.zoetrope.min.js"></script>
<script src="hammer.min.js"></script>
<script src="jquery.hammer.js"></script>

3. Insert an image on your web page

<img id="image1" src="1.jpg" width="600" />

4. The javascript

<script type="text/javascript">
;(function($) {
onClick: function( e, self ) {
var pos = self.cursorToImg( e.pageX, e.pageY);
$("#position").html(e.pageX + " " + e.pageY + " " + pos.relx + " " + pos.rely);

5. Possible plugin options.

// Get/Set the current zoom level of the image
// must be >= 1
zoom: 1, 

// How much the zoom changes for each mousewheel click
// must be a positive number
zoomStep: 0.1, 

// Get/Set the limit on the maximum zoom level of the image
zoomMax: 0

// Controls if image will be zoomable
zoomable: true, 

// Controls if image will be dragable
dragable: true,

// Callback triggered by a mouseclick on the image
onClick: function() {},

// Callback triggered when the image view is repainted
onUpdate: function() {},

Change Logs:

v1.0.1 (2017-07-17)

  • Replace depreciated jQuery img.load event trigger

v1.0.0 (2017-02-12)

  • Fix for scroll position on mobile

v0.9.1 (2016-12-31)

  • Add zoomMax option to limit maximum possible zoom level

v0.9.0 (2016-08-07)

  • Replace jquery.event.ue with hammer.js and jquery.hammer.js for more flexibility with touch gesture support
  • Add dragable option allowing user to disable dragging

v0.8.0 (2016-08-01)

  • Replace toe.js with jquery.event.ue for better touch gesture support

v0.7.4 (2015-07-19)

  • Fix for triggering of drag events during pinch gestures

v0.7.3 (2014-09-12)

  • Fix multiple click/tap events when using jQuery Mobile

v0.7.2 (2014-07-22)

  • Add dependency on jquery-mousewheel
  • Stop IE 10 & 11 continuously dragging image
  • Fix double click event bug for IE10&11

v0.7.1 (2014-06-19)

  • Add zoomable option allowing user to disable zooming.
  • support touch events and refine mouse event handling.

v0.7.0 (2014-05-17)

  • Added support for pinch and drag touch gestures for mobile device support (adds requirement for toe.js). 
  • Added dependency on the requestAnimationFrame polyfill provided by Zoetrope for more responsive image scaling anddragging. 
  • Changed to using css transform to scale and translate image for better performance on mobile platforms. 
  • Minimum IE supported is now IE 9 - stick with version 0.6 if you need IE 8 support. 
  • Updated Grunfile.js to include tests against latest version (2.1.0) of jQuery.

v0.6.0 (2013-06-07)

  • Major refactoring of the code to make it work in IE8. 
  • Instead of manipulating a background image a new image element with the same src as the original image is positioned over it. 
  • Added the panTo, getView, isVisible, imgtoView and viewToImg public methods. 
  • Added unit tests to cover most of the code.

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