Minimal Image Zooming Plugin - Wheelzoom

Minimal Image Zooming Plugin - Wheelzoom
File Size: 87.6 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.