jQuery Plugin For Any Element Zooming And Panning - zoompanzoom.js
File Size: | 3.94 KB |
---|---|
Views Total: | 2217 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
zoompanzoom.js is a really small jQuery plugin which enables the user to zoom in/out and pan any elements (divs, text, images, svgs, etc.) within a specific container.
How to use it:
1. The plugin requires jQuery and jQuery UI loaded properly in the document.
<script src="jquery.min.js"></script> <script src="jquery-ui.min.js"></script>
2. Load the zoompanzoom.js
script after jQuery library.
<script src="zoompanzoom.js"></script>
3. Active the zooming and panning functionalities on a specific container.
$("#container).zoompanzoom();
4. Create controls to zoom in/out or reset your elements.
<div id="controls"> <button id="zoom_in">+</button> <button id="zoom_out">-</button> <button id="zoom_reset">reset</button> </div>
5. Customization options with default values.
$("#container).zoompanzoom({ animationSpeed: "fast", zoomfactor: .1, maxZoom: 3, minZoom: 0.5, disablePan: false });
This awesome jQuery plugin is developed by SoorajChandran. For more Advanced Usages, please check the demo page or visit the official website.