ezoom.js is a jQuery plugin for simple Image with zoom effect.

Nam Le

Last update: Sep 3, 2022

Overview

ezoom.js

ezoom.js is a jQuery plugin for simple Image with zoom effect.

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, {
		onRotate: function(callback) {
			// 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.

An blog has been released:

in English: https://nready.net/ezoom and https://leqnam.github.io/ezoom/

License

Licensed under the MIT license.

Nam Le, 2021, [email protected],

http://nready.net

🔍 A view component for React Native with pinch to zoom and drag to pan functionality.

react-native-pan-pinch-view A view component for React Native with pinch to zoom and drag to pan functionality. 👋 Introduction Even though the demo s

Oct 6, 2022

Easy Pan and Zoom JS Library

EasyPZ Use this Javascript library to make your web visualization interactive via pan and zoom, for mobile and desktop! EasyPZ supports many interacti

Nov 21, 2022

A vanilla-js module for adding zoom-on-wheel and pan-on-drag behavior to inline SVG elements.

svg-pan-zoom-container A vanilla-js module for adding zoom-on-wheel and pan-on-drag behavior to inline SVG elements. No need to write scripts. Just ma

Dec 10, 2022

An open-source Typing-effect Library, That enables potential users to add a typing effect to mere DOM Elements.

Typing Effect Library An open-source Typing-effect Library I created. That enables potential users to add a typing effect to mere DOM Elements. Tool P

Oct 3, 2022

Flexible, powerful and modern library for creating the running horizontal blocks effect, also known as ticker or the «marquee effect».

Cuberto Reeller Flexible, powerful and modern library for creating the running horizontal blocks effect, also known as ticker or the «marquee effect».

Jan 4, 2023