Press "Enter" to skip to content

A Library For Panning And Zooming Elements | panzoom

Panzoom is a small ES6 module for adding simple pan and zoom functions to any DOM element. Includes cascading containers and border potential (internal or external). Dealing with touch events on touch devices. Only for modern browsers.

panzoom angular, panzoompanzoom, pan zoom react, html5 canvas pan zoom, panzoom npm, svg pan zoom, svg panzoom jsfiddle, image pan zoom

How to make use of it:

1. Import the Panzoom into the doc.

import {panzoom} from './src/panzoom.js';
// OR
<script src="./dist/panzoom.min.js"></script>

2. Pan and Zoom with inside bounds.

<div id="container">
  <div id="example">Element To Pan And Zoom</div>
</div>
panzoom('#example');

3. Pan and Zoom with outer bounds.

panzoom('#example', {
  bound:'outer'
});

4. Pan and Zoom without bounds.

panzoom('#example', {
  bound:'none'
});

5. Enable/disable pan & zoom behaviors.

panzoom('#example', {
  pan: true,
  zoom: true
});

6. More configuration choices.

panzoom('#example', {
  wheel_step: 0.2 // 0.01 - 0.4
  scale_min: 0.01, // 0.01 - 20	
  scale_max: 10, // 0.01 - 20	
});

JavaScript Library For Panning & Zooming Elements, Panzoom Plugin/Github


See Demo And Download

Official Website(cmorillas): Click Here

This superior jQuery/javascript plugin is developed by cmorillas. For extra Advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.