JQuery Plugin For Simple Image With Zoom Effect | ezoom.js

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


See Demo And Download

Official Website(leqnam): Click Here

This superior jQuery/javascript plugin is developed by leqnam. For extra Advanced Usages, please go to the official website.

Related Posts

Simple-and-Modern-Multi-Level-Sidebar-Menu-on-Bootstrap-4

[Offcanvas] Simple and Modern Multi-Level Sidebar Menu on Bootstrap 4

The multi-level sidebar menu is simple and fast on Bootstrap. So you must be aware of how to use Bootstrap itself. This plugin is fast, responsive, multi-level,…

vanilla-js-carousel

Flip Sliding Carousel Gallery Made Of CSS And Vanilla JS

Vanilla JS Carousel is a JavaScript Slider plugin for navigating objects in a 3D space just like Cover Flow. Getting started Clone or download the repo. Open…

bootstrap-5-dark-theme

Dark & Light Switch Mode Toggle for Bootstrap 5

Switching to dark mode is done by toggling HTML tags that include -dark or -light as a category. It is made by manipulating the DOM with JavaScript. The text color also changes depending…

vuejs-dialog-plugin

Vuejs Lightweight Prompt Based On Promise And Confirm Dialog

VUEJS DIALOG PLUGIN is a lightweight, promise-based, prompt, and dialog-based alert. Important updates The dialog will always be resolved by an object. (ie a callback to continue…

browser-alert-confirm-dialog-alert4html-js

Insert HTML Into Your Browser Alert & Confirm Dialog | alert4html.js

alert4html.js is a JavaScript library that enables you to insert HTML directly into your browser alerts while simulating Chrome alerts as well. alert4html.js is an alternative to…

Lightweight-Flexbox-Carousel-Plugin

Simple and Lightweight Flexbox Carousel Plugin With JavaScript | flexCarousel.js

Flexbox Responsive Slider – flexCarousel.js plugin is a simple and lightweight plug-in from Flexbox carousel ES6 JavaScript. An unofficial fork by Slick Carousel. Flex Carousel is a…