smooth, iOS/medium.com style thumbnail viewing
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
dist
example
test
.gitignore
History.md
Makefile
Readme.md
component.json
image-zoom.js
index.css
index.js
package.json

Readme.md

image-zoom

Zoom an image to full-screen, as seen on Medium.com. It uses transforms for buttery smoothness, but should still work on older browsers given polyfills for classList & bind. Demo here.

Using React? Try react-thumbnail-zoom instead.

Installation

Install using Duo or NPM for use with browserify.

$ npm install image-zoom
var Zoom = require('bmcmahen/image-zoom');

or use the standalone build in dist using the global Imagezoom.

API

You can use markup (much like Bootstrap) for initiating zoom on certain elements.

<img class='thumb' src='inst6.jpg' data-zoom-padding='20' data-zoom-url='inst6.jpg' data-zoom-overlay='true'>
<script src='imagezoom.js'></script>

Or you can use the javascript API, like in the example below.

<img class='thumb' src='inst6.jpg'>

<script>
var ImageZoom = require('image-zoom');

var img = document.querySelector('img');
var zoom = new Imagezoom(img).overlay().padding(350);

img.onclick = function(e){
  // stop propagation if we want to retain our HTML api
  // in other parts of the site.
  e.stopPropagation();
  zoom2.show();
};

// unbind our delegate listener if we aren't
// using the HTML api.
zoom.stopListening();

</script>

.show()

Zoom in.

.hide()

Zoom out.

.overlay()

Enable the overlay when zooming into the image.

.padding(num)

Set the padding of the zoomed image.

.use(plugin)

Use a plugin.

Events

showing

shown

hiding

hidden

cancel

var zoom = require('image-zoom');
var z = zoom(document.querySelector('img'));
z.on('shown', function(){
  // our element is zoomed in
});

License

MIT