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.
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.
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>
Zoom in.
Zoom out.
Enable the overlay when zooming into the image.
Set the padding of the zoomed image.
Use a plugin.
hidden
var zoom = require('image-zoom'); var z = zoom(document.querySelector('img')); z.on('shown', function(){ // our element is zoomed in });
MIT