JQuery Plugin For Simple Image With Zoom Effect

ezoom.js is a simple photo jQuery plugin with a zoom effect. This plugin is under development to support Next / Previous Image Gallery / later SVG.

This photo viewer plugin makes it easy to view, pan, zoom, and rotate your image in a full-screen modal popup.

Features:

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

How to make use of it:

1. Load the principle 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 picture and achieved.

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

4. You may also load an exterior picture into the picture viewer.

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

5. Determine whether or not to point out 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
  },
});

Zoomable/Rotatable/Panable Image Viewer, ezoom.js Plugin/Github