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

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.