jQuery Plugin For Any Element Zooming And Panning - zoompanzoom.js

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.