Minimal jQuery Image Zoom & Pan Plugin

A lightweight jQuery plugin that generates 'zoom in' and 'zoom out' buttons to enlarge & narrow an image. Also provides an image pan function which allows you to move the image to a desired position by mouse drag. Based on CSS3 2D scale transform.

How to use it:

1. Include the jQuery image zoom CSS file in the head section of your web page.

<link href="jquery.imagezoom.css" rel="stylesheet">

2. Insert your images into the web page as follow.

<div class="demo">
  <a href="large.jpg">
    <img src="small.jpg" alt="Alt text">
  </a>
</div>

3. Include jQuery library and the jQuery image zoom plugin at the bottom of the web page.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jquery.imagezoom.js"></script>

4. Initialize the plugin to enable the image zoom & pan functions.

$('.demo').imageZoom();

5. The default plugin settings.

// amount to zoom in / out by
scaleAmount:1.2, 

// Text to show in span for zoom in button
zoomInText:'+', 

// Text to show in span for zoom out button
zoomOutText:'-'

Change log:

2014-12-02

• Added touch support for image dragging

---

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