Canvas Based Image Zoom & Pan JS Library – Wheelzoom

Category: Image , Javascript , Zoom | April 5, 2017
Author: Luperi
Views Total: 10,410 views
Official Page: Go to website
Last Update: April 5, 2017
License: MIT


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