Flickr-style “fullscreen” (full viewport) click-to-zoom,
mouse-to-pan for your own <img> tags.
-
Include the CSS and JS in your HTML document:
<link rel="stylesheet" type="text/css" href="flickr-zoom.css"> <script type="text/javascript" src="flickr-zoom.js"></script>
Where you choose to include it is up to you; the code does not care.
-
Mark up
<img>elements with theflickr-zoomclass as desired. When specified images are larger than viewport then flickr-zoom will simply expand to their natural size. -
Open up your document and try it out!
Responsive images with sizes and srcset attributes are also supported,
but in these cases flickr-zoom assumes that the full size image is specified
with the src attribute. This approach allows pages to be loaded as fast as possible
by initially loading smaller image sizes for the user, but clicking on these images makes still
zooming and panning possible.
When responsive images are used then loading of full size image might take some time. For this a loading spinner animation is shown.
Color of this spinner can be changed via CSS variable:
:root {
--flickr-zoom-screen-loader-color: #e9e9e9;
}