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

Demo: Link

Download: Github

Code JavaScript