ezoom.js

ezoom.js is a jQuery plugin for simple Image with zoom, rotate, grabbing effect with supporting Event handlers.

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.
Event handlers

This plugin in under development to support Next/Prev a gallery Images/SVG later.

You can find the repository at: https://github.com/leqnam/ezoom
and demo here: https://leqnam.github.io/ezoom/demo/

Installation
Usage
Options
Usages
Methods
Events
Versions
Acknowledgements
License

Installation

Set up the HTML:

    <div id="imgDiv">
        <img src="images/may.png">
    </div>

and the javascript:

    ezoom.onInit($('#imgDiv img'), {
        onClose: function (result) {
            alert(result);
        }
    });

Usage

The plugin can be use with method onInit as two ways:

Expand an image HTML dom in a Zoom Modal to zoom in/out and rotate image. The element dom is passed on the query selector.

    ezoom.onInit(domElement, {
        onClose: function (result) {
            alert(result);
        }
    });

Expand an remote image with an URL in a Zoom Modal to zoom in/out adn rotate image, by passing the src option.

    const src = 'some image url';
    ezoom.onInit(domElement, {
        src: src,
        onClose: function (result) {
            alert(result);
        }
    });

Options

At the initialize, only src and hideControlBtn is available.

Option	Value	Description
`domElement`	dom	HTML DOM querySelector
`src`	string	An Image remote URL
`hideControlBtn`	boolean	Hide the Rotate Left/Right

Ex: To hide the Rotate Left/Right:

    ezoom.onInit($('#imgDiv img'), {
        hideControlBtn: true
    });

Methods

At the initialize, we only need the onInit to create the zoom-modal instance and listen on this instance.

Events

Event	Description
`onShow`	Fired when the Zoom modal is shown
`onClose`	Fired when the Zoom modal is closed
`onRotate`	Fired when rotating the image
`onMoveStarted`	Fired when starting to move the image
`onMovedCompleted`	Fired when finished moving by release the mouse
`onMoving`	Fired while moving the image

The events can be used look like:

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

Versions

v0.1.0
1. Single image
2. Add event listeners and callback

Acknowledgements

This plugin has been developed to use in my internal project to replace panzoom (https://github.com/anvaka/panzoom) – that has some issues with rotate.

A blog has been released: