You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
Or you can use the javascript API, like in the example below.
<imgclass='thumb' src='inst6.jpg'><script>varImageZoom=require('image-zoom');varimg=document.querySelector('img');varzoom=newImagezoom(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
varzoom=require('image-zoom');varz=zoom(document.querySelector('img'));z.on('shown',function(){// our element is zoomed in});