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" />

$(function(){
  $('#imageZoom').imageZoom();
});

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" />
  ...
</div>

$(function(){
  $('.my-gallery').imageZoom({
    $(this).imageZoom();
  });
});

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

$(function(){
  $('.my-gallery').imageZoom({
    $(this).imageZoom({
      zoom: 200
    });
  });
});

Changelog:

2020-11-02

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

2020-11-02

• fix: Escaped image Obj to prevent a XSS attack

2020-07-21

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