This time I will share jQuery Plugin and tutorial about Zoomable/Rotatable/Panable Image Viewer – jQuery ezoom.js, hope it will help you in programming stack.
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.
1 |
<script src="/path/to/cdn/jquery.min.js"></script> |
2 |
<script src="/path/to/ezoom.js"></script> |
2. Load the Font Awesome Iconic Font for the rotate and close controls.
1 |
<link rel="stylesheet" href="/path/to/cdn/font-awesome/all.min.css" /> |
3. Attach the plugin to your image and done.
1 |
ezoom.onInit($('img'), { |
4. You can also load an external image into the image viewer.
1 |
ezoom.onInit(domElement, { |
5. Determine whether to show the controls.
1 |
ezoom.onInit(domElement, { |
6. Event handlers.
01 |
ezoom.onInit(domElement, { |
11 |
onMoveStarted: function(){ |
14 |
onMovedCompleted: function(){ |
