zoom zoom-images rotate rotate-image transform nready nreadylabs jquery-plugin javascript wheelzoom jquery-zoom drag-scrollable-image ezoom pan panzoom

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

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: