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.
