Canvas Based Image Zoom & Pan JS Library – Wheelzoom

Category: Image , Javascript , Zoom | April 5, 2017
Views Total:11,543 views
Official Page:Go to website
Last Update:April 5, 2017


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('', 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

You Might Be Interested In:

Leave a Reply