jQuery pan and zoom image plugin – Smart Zoom

Smart Zoom – a jQuery pan and zoom image plugin with a simple, but useful and nice control UI.

jQuery pan and zoom image plugin in action

Meet the Smart Zoom plugin, which manages smooth zoom and pan on a given HTML element. The plugin works on mobile and desktop browsers, and use CSS3 transitions (or JavaSript for older browsers). Zoom is enabled via mouse events (scroll and click), and on mobile – with touch events.

jQuery pan and zoom image - an example
jQuery pan and zoom image – an example

Usage

Create an element, that contains the picture, and initialize the plugin:

$(document).ready(function() {
  $("#elementToZoom").smartZoom();
});

We can customize various options of the plugin (see the docs).

Methods – examples

Zoom on a given position. This call add 0.5 to the target current scale:

jQuery(document).ready(function() {
  $('#elementToZoom').smartZoom("zoom", 0.5);
});

Move the target on the given position. This call move the target 5 pixels to the right:

jQuery(document).ready(function(){
  $('#elementToZoom').smartZoom("pan", 5, 0);
});

Remove and clean the plugin:

jQuery(document).ready(function(){
  $('#elementToZoom').smartZoom("destroy");
});

License: MIT

Demo:

http://javascript-html5-tutorial.net/demos/smart-jq-zoom/example/

Get the jQuery pan and zoom image plugin from GitHub:

https://github.com/e-smartdev/smartJQueryZoom

You may also like:

Leroy Zoom – A lightweight jQuery image zoom and magnifier plugin

jQuery magnifying glass zoom plugin

ImageLens – A lens effect image zoom plugin

Jquery Image Zoom Plugin

jQuery Virtual Tour – panorama viewer plugin

Enjoy!

Share:Share on Facebook4Share on Google+1Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1