Smooth Pan And Zoom Plugin For jQuery - AlottaZoom

AlottaZoom is a smooth pan and zoom plugin that zooms in/out an image and pans/moves it to a different image area with mouse or by clicking custom controls.

More Features:

• Custom initial/min/max zoom levels.
• Easing functions when zooming and panning.
• Supports custom image markers with click handlers.
• Allows you to customize the speed.
• Convenient API methods to create your own controls.
• Image loading indicator.

How to use it:

1. Wrap the zoomable and pannable image into a container element.

<div id="wrapper">
  <img src="example.jpg" />
</div>

2. You can also add as many markers/notes to the image as follows:

<div id="wrapper">
  <img src="example.jpg" />
  <a id="marker-1" title="marker 1" href="#" class="marker" data-x="320" data-y="1450"></a>
  <a id="marker-2" title="marker 2" href="#" class="marker" data-x="1500" data-y="40"></a>
</div>

3. Load jQuery library and the jQuery AlottaZoom plugin's files in the HTML.

<link rel="stylesheet" href="alottazoom.css" />
<script src="jquery.min.js"></script>
<script src="alottazoom.min.js"></script>

4. Apply the pan and zoom effect to the image.

$('#wrapper').alottazoom({
  marker_activate_callback: function($alottazoom, $marker) {
    // fired when the markers are activated
  },
  marker_deactivate_callback: function($alottazoom, $marker) {
    // fired when the markers are inactivated
  },
});

5. Determine the zoom level:

• fit: Fit the image to the container
• fill: Fill the container with the image

$('#wrapper').alottazoom({

  // default zoom level
  zoom: 'fit',

  // min zoom level
  min_zoom: 1.0,

  // max zoom level
  max_zoom: 6.0
  
});

6. Specify the horizontal/vertical offsets when the zoom level is numeric. Defaults to 0.

$('#wrapper').alottazoom({

  x: 0,
  y: 0

});

7. More configuration options with default values.

$('#wrapper').alottazoom({

  zoom_speed: 6.0,
  drag_speed: 0.68,
  move_easing: 'alottaZoomZoom',
  move_duration: 750,
  zoom_easing: 'alottaZoomZoom',
  zoom_duration: 550,
  reset_easing: 'alottaZoomZoom',
  reset_duration: 550,

});

8. Pan and zoom the image programmatically.

// shift the image slightly
// alottazoom('shift', x, y);
$('#wrapper').alottazoom('shift', 0, 150);

// move the image to a specific position at a given zoom level
alottazoom('goto', x, y, zoomLevel);
$('#wrapper').alottazoom('goto', 320, 1450, 0.5);

// reset the image to its original size & position
$('#wrapper').alottazoom('reset');

---

This awesome jQuery plugin is developed by dfletcher. For more Advanced Usages, please check the demo page or visit the official website.