Zoom Images On Click/Tap - image-zoom.js

File Size: 171 KB
Views Total: 88557
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Zoom Images On Click/Tap - image-zoom.js

A lightweight (1.8kb minified) and easy jQuery image zoom plugin that enables the visitor to zoom in/out images with mouse and touch events.

How It Works:

  • Click/tap to zoom in an image.
  • Pan around the zoomed image with mouse movement.
  • Click/tap the zoomed image or move the cursor out of it to reset the zoom.

How to use it:

1. Download the plugin and include the following CSS & JavaScript files on the HTML page.

<link rel="stylesheet" href="/path/to/dist/css/image-zoom.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/js/image-zoom.min.js"></script>

2. Attach the function to your image within the document. Done.

<img id="imageZoom" src="https://source.unsplash.com/CkW90N_oro8/1200x900" />

3. Apply the image zoom functionality to all images in a gallery.

<div class="my-gallery">
  <img class="gallery-image" src="1.jpg" alt="Alt 1" />
  <img class="gallery-image" src="2.jpg" alt="Alt 2" />
  <img class="gallery-image" src="3.jpg" alt="Alt 3" />

4. Determine the zoom level. Default: '150'.

      zoom: 200



  • add mobile support


  • fix: added check to verify that plugin is been used on images tags only


  • fix: Escaped image Obj to prevent a XSS attack


  • Add single quote to background image to allow image names with special characters

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