Image Zooming & Panning Library With JavaScript And CSS3 Transforms – Panzoom

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

Preview:

Image Zooming & Panning Library With JavaScript And CSS3 Transforms – Panzoom

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

You Might Be Interested In:


One thought on “Image Zooming & Panning Library With JavaScript And CSS3 Transforms – Panzoom

  1. TomHilbilly019

    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!

    Reply

Leave a Reply