Modern Image Zoom (Lightbox) In JavaScript

🏞 `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 mvoloskov/image-zoom --save

yarn add mvoloskov/image-zoom

import imageZoom from 'image-zoom'
imageZoom()

Alternative — use CDN

<script src="https://cdn.jsdelivr.net/gh/mvoloskov/image-zoom/dist/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="" />

Redefining what images to target

The default selector is img[alt]:not([alt=""]).

You can provide your own though:

imageZoom('img, svg')   // alternative selector

Alternative timing function

You can always hack the plugin redefining straightforward CSS:

.image-zoom,
.image-zoom-wrapper::after {
    transition-timing-function: ease-in-out;
}

Alternative background color

.image-zoom-wrapper::after {
    background-color: hotpink;
}

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()

Anatomy

.image-zoom-wrapper — element that wraps every image. Mimicks its display property. 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.

Limitations

img inline styles will be destroyed. Use CSS selectors to stylize images.
img shouldn’t have transforms. If needed, wrap it with a container and apply transforms there instead.
:root’s overflow-x will be hidden

Enjoy!

Download Details:

Author: mvoloskov

Demo: https://miloslav.website/image-zoom/

Source Code: https://github.com/mvoloskov/image-zoom

#javascript