Canvas Based Image Zoom & Pan JS Library – Wheelzoom

This is a pure JavaScript of the jQuery Wheelzoom plugin that provides ‘mouse-wheel to zoom’ and ‘drag to pan’ functionalities on an image. Based on HTML5 canvas and has events handling support.

How to use it:

Place the JavaScript file wheelzoom.js right before the closing body tag.

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

Initialize the Wheelzoom with default options on your images within the document.

demo = wheelzoom(document.querySelectorAll('img'));

Set the initial/max zoom level:

demo = wheelzoom(document.querySelectorAll('img'),{
       zoom: 0.10,
       maxZoom: -1
});

Event handles:

demo.addEventListener('wheelzoom.in', function(e) {
  // when zoom in
});
demo.addEventListener('wheelzoom.out', function(e) {
  // when zoom out
});
demo.addEventListener('wheelzoom.dragstart', function(e) {
  // when drag start
});
demo.addEventListener('wheelzoom.drag', function(e) {
  // when dragged
});
demo.addEventListener('wheelzoom.dragend', function(e) {
  // when drag end
});
demo.addEventListener('wheelzoom.reset', function(e) {
  // when reset
});
demo.addEventListener('wheelzoom.destroy', function(e) {
  // when destroy
});