Zoomable/Rotatable/Panable Image Viewer - jQuery ezoom.js

ezoom.js is a simple yet full-featured image viewer plugin that makes it easier to view, pan, zoom, and rotate your image in a fullscreen modal popup.

Features:

• Zoom in/out image with mouse wheel.
• Pan image with mouse drag.
• Rotate image with arrow keys, A D W S R keys, or custom controls.
• Supports both local and external image.

How to use it:

1. Load the main script ezoom.js after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/ezoom.js"></script>

2. Load the Font Awesome Iconic Font for the rotate and close controls.

<link rel="stylesheet" href="/path/to/cdn/font-awesome/all.min.css" />

3. Attach the plugin to your image and done.

ezoom.onInit($('img'), {
  // options here
});

4. You can also load an external image into the image viewer.

ezoom.onInit(domElement, {
  src: '/path/to/image'
});

5. Determine whether to show the controls.

ezoom.onInit(domElement, {
  hideControlBtn: false
});

6. Event handlers.

ezoom.onInit(domElement, {
  onShow: function(){
    // do something
  },
  onClose: function(){
    // do something
  },
  onRotate: function(){
    // do something
  },
  onMoveStarted: function(){
    // do something
  },
  onMovedCompleted: function(){
    // do something
  },
  onMoving: function(){
    // do something
  },
});

---

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