Minimal Image Zooming Plugin - Wheelzoom

Wheelzoom is a lightweight and simple jQuery Vanilla JavaScript plugin which allows your visitor to zoom in / out  images with mousewheel or trackpad.

How to use it:

1. Include the minified version of the Wheelzoom plugin on the webpage.

<script src="wheelzoom.min.js"></script>

2. Insert an image on your web page.

<img src='demo.jpg' class="demo" alt='Demo' width='600' height='450'/>

4. Initialize the plugin on the image and done.

wheelzoom(document.querySelector('img.zoom'));

5. Set the zoom level. Default: 0.1.

wheelzoom(document.querySelector('img.zoom'),{
  zoom: 0.5
});

6. Set the initial/max zoom level. Default: 0.1.

wheelzoom(document.querySelector('img.zoom'),{
  maxZoom: false,
  initialZoom: 1
});

7. Set the initial zoomed coordinates.

wheelzoom(document.querySelector('img.zoom'),{
  initialX: 0.5,
  initialY: 0.5
});

Changelog:

2019-12-06

• Added initialX and initialY for setting the initial zoomed coordinates.
• Now works a Vanilla JavaScript plugin.

2014-09-10

• fix background-image path bug.

2014-04-18

• Simplified by dropping support for having border and padding on the img element.

---

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