This web page requires JavaScript to be enabled.

JavaScript is an object-oriented computer programming language commonly used to create interactive effects within web browsers.

How to enable JavaScript?

ezoom.js – a jquery plugin for image with zoom, rotate, grabbing effect

Blog January 21, 2021 Nam Le 0

ezoom.js

Mây

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/

Table of contents


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:


License

Licensed under the MIT license.

Nam Le, 2021,
[email protected],

https://nready.net


Last modified on June 20th, 2021 at 3:44 am

Nam Le
lequocnam



0 responds

Leave a Reply

Your email address will not be published. Required fields are marked *