Canvas Based Image Zoom & Pan JS Library – Wheelzoom

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

Preview:

Canvas Based Image Zoom & Pan JS Library – Wheelzoom

Description:

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
});

You Might Be Interested In:


Leave a Reply