Demo β’ Configuration β’ Author
π Fast Image Zoom
Image zoom on click as seen on popular publishing platform.
What it does?
You click on an image and it smoothly zooms in or out to fit screen. You click again β it smoothly goes back to normal. You scroll β it also goes back.
Why is it better than alternatives?
π Framework-agnostic β works with everything from Knockout.js to Web Componentsπ Zero-dependency𧬠Perfect for dynamic content, mutation-agnostic β you can do whatever you want with images, it'll workβ‘οΈ Blazing fast β no matter if it's 10 images or 10000, it uses only two event listeners. Not per image, just two listeners. Complexity is always O(1)π€ Powered by quirky math to precisely calculate everything and do the trick with only one transformationπ¦ Looks good on both dark and light modesπ¦ Zero-configuration by default but extensible when you need itπΏ Works flawlessly even on iOS Safari, in every orientation, with every image no matter the size and dimensions
Basic usage
npm install fast-image-zoom --save
or
yarn add fast-image-zoom
import imageZoom from 'fast-image-zoom'
imageZoom()Alternative β use CDN
<script src="https://cdn.jsdelivr.net/gh/mvoloskov/fast-image-zoom/dist/fast-image-zoom.min.js"></script>
<script>
imageZoom()
</script>That's it!
How it works
Plugin targets meaningful, content images:
<!-- yes -->
<img src="foo.jpg" alt="Cute kitten" />
<!-- no -->
<img src="bar.jpg" />
<img src="bar.jpg" alt="" />Configuration
Here are the defaults:
imageZoom({
selector: `img[alt]:not([alt=""]):not([data-image-zoom-disabled])`,
cb: () => {},
exceed: false,
padding: 20,
})-
selector(string) is used to target images. By default it only targets meaningful images (e.g. ones withalt), so your icons won't be magnified on click. -
cb(function) fires after the plugin is initialized. -
exceed(boolean) defines whether images should exceed their natural size when zoomed. For example if you zoom 100x100 image on a 1080p screen withexceed: false, its final size will be 100px, meanwile withexceed: trueit will be 1080px. -
padding(integer) defines a gap in pixels between a zoomed image and the closest edge of the viewport.
Note that if exceed is false and a smaller image appear to have a larger gap between its edge and the edge of the viewport, padding won't be added. For example, if you zoom an 100x100 image on a 1080p screen and your padding is set to 20, a natural gap between an image and the viewport edge would be (1080 - 100) / 2 = 490, thus there is no need to add that 20px gap.
Only pixels are supported by now.
Setting exceed per image
You can explicitly define exceed for a specific picture via a data-attribute:
<img src="..." alt="..." data-image-zoom-exceed="true">Disabling the plugin for the specific image
You can disable zooming for any image you like, even if it has alt:
<img src="..." alt="..." data-image-zoom-disabled>Note that if you redefine the selector in a way that doesn't account data-image-zoom-disabled attribute, this feature will stop working.
Restyling
You can always hack the plugin redefining straightforward CSS:
Changing a timing function
.image-zoom,
.image-zoom-wrapper::after {
transition-timing-function: ease-in-out;
}Changing the background color
.image-zoom-wrapper::after {
background-color: hotpink;
}Anatomy
.image-zoom-wrapperβ element that wraps every image. Mimicks itsdisplayproperty. We use it to add page background and slightly separate the zoomed image from what is behind..image-zoom-wrapper-zoomedβ the same wrapper but when image is zoomed..image-zoomβ image itself that was processed and is interactive ready to zoom..image-zoom-zoomedβ zoomed image.
Disabling the plugin
Being called, plugin returns the destroy function that you may call to remove event listeners. It will also remove related styles from <head> and from images themselves.
const destroy = imageZoom()
// don't need it anymore
destroy()Limitations
imginline styles will be destroyed. Use CSS selectors to stylize images.imgshouldn't have transforms. If needed, wrap it with a container and apply transforms there instead.:root'soverflow-xwill behidden
Enjoy!