Author: | SpencerWie |
---|---|
Views Total: | 5,405 views |
Official Page: | Go to website |
Last Update: | March 31, 2019 |
License: | MIT |
Preview:

Description:
Panzoom is a lightweight JavaScript library to pan and zoom images inside a container using drag and mouse wheel events.
Not only images, the library also works with Canvas and SVG elements.
How to use it:
Download and import the minified version of the Panzoom library into the html file.
<script src="/path/to/panzoom.min.js"></script>
Insert images to the webpage.
<img class="panzoom" src="1.jpg"> <canvas class="panzoom"> ... </canvas> <img class="panzoom" src="1.svg" type="image/svg+xml">
Apply the PanZoom functionality to the images.
PanZoom(".panzoom");
Customize the PanZoom functionality with the following options.
PanZoom(".panzoom", { // min/max scale minScale : 0.1, maxScale : 5, // increment step increment : 0.05, // whether to zoom linearly when using increment liner : false });
Changelog:
03/31/2019
- Added changed for offsetWidth and offsetHeight and DIV example
08/29/2018
- Added zooming to work with Firefox
Just wanted to let you know that i was looking for weeks for a simple solution to add pan and zoom (zoom to point) features to one of my projects and this was probably the best i could find. Thank you!