Minimal jQuery Image Zoom & Pan Plugin

File Size: 1.36 MB
Views Total: 2475
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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">

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

<script src="//"></script>
<script src="jquery.imagezoom.js"></script>

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


5. The default plugin settings.

// amount to zoom in / out by

// Text to show in span for zoom in button

// Text to show in span for zoom out button

Change log:


  • 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.