Panzoom: Pan & Zoom Image Using JS & CSS3 Transforms

Panzoom: Pan & Zoom Image Using JS & CSS3 Transforms

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

Fancy you stumbling on my piece of the internet. Bonjour!

My name is Anmol and I'm the Blogger-In-Chief of this joint & working as the Chief Technology Officer at Azoora, Inc. I'm putting up my views here trying to help creative solopreneurs, developers & designers build their business using the power of websites, apps & social media, this, is, my jam.

If you're looking to start your own online business with a professional high quality website or mobile app, just get in touch. I'd be more than happy to assist.

SKYPE | FACEBOOK | LINKEDIN | TWITTER | EMAIL

2 comments

Leave a Comment

Your email address will not be published. Required fields are marked *