Author: | Luperi |
---|---|
Views Total: | 11,494 views |
Official Page: | Go to website |
Last Update: | April 5, 2017 |
License: | MIT |
Preview:

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