Pure JavaScript image zoom that can be customized and invoked programmatically.

• Click to zoom in
• Press on the image for extra zoom-in and try moving around!
• Zoom into a higher resolution image if supplied

Demo

Install with your package manager:

npm install zooming --save

bower install zooming --save

Then load this module, e.g., via Browserify:

var Zooming = require('zooming')

Alternatively, download and include a script tag in your page.

Any image with attribute data-action="zoom" is zoomable by default, for example:

<img src="img/sample.jpg" data-action="zoom" />

You can also define zoomable images in JavaScript:

Zooming.listen('.selector') // or
Zooming.listen(element)

Add data-original attribute to supply a hi-res image when zooming in:

<img src="img/thumbnail.jpg" data-action="zoom" data-original="img/original.jpg" />

Attach click listeners to all matched images.

Open (zoom in) the matched image. Fires optional callback when the transition is done.

Close (zoom out) if currently zoomed-in.

Grab the current image given a mouse/touch position and apply extra zoom in.

• x, y: Number. The point where the press happened.
• start: Boolean. Indicate whether this is the initial grab (press mouse/finger down) or not.

Release the current image.

Takes an options object. Available options:

Inspired by zoom.js and zoomerang.