Minimal jQuery Image Zoom & Pan Plugin
File Size: | 1.36 MB |
---|---|
Views Total: | 2459 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.