Markup
Drop an <img> inside an
<image-zoom> element. That's it.
<image-zoom min="1" max="3">
<img src="photo.jpg" alt="" />
</image-zoom>Pinch to zoom
On mobile, pinch with two fingers. On desktop, double-click to
toggle between min and max. When zoomed,
drag to pan.
Custom min & max
Set the zoom range with min and max
attributes. Defaults are 1 and 3.
<image-zoom min="1" max="5">
<img src="art.jpg" alt="" />
</image-zoom>
Gallery
Every instance maintains its own gesture state. Interact with any tile independently.
Programmatic control
Call zoomTo() or reset() from JavaScript
to drive the component without a gesture.
const el = document.querySelector('image-zoom')
el.zoomTo(2) // animate to 2x
el.reset() // animate back to min
el.scale // read current scale
Events
The component dispatches
image-zoom:zoomstart,
image-zoom:zoomend, and
image-zoom:change custom events during gestures.
