What is Zoomora?
Zoomora is a modern, lightweight JavaScript lightbox plugin for displaying images and videos in a full-screen overlay. It works with plain HTML, WordPress, React, Vue, or any other setup — with no external dependencies required.
You add a few data attributes to your images, call new Zoomora(), and you get a polished, fully-featured lightbox with gallery navigation, zoom, fullscreen mode, video support, and touch gestures — out of the box.
What Can It Do?
Images & Galleries Group multiple images into a gallery using a shared data-zoomora attribute. Zoomora automatically builds thumbnail navigation, a counter, and prev/next controls for the group.
Smart Zoom Zoomora checks at runtime whether an image is actually larger than its rendered size. If it is, clicking the image cycles through progressive zoom levels — 1.5×, 2×, 3×, and 100% actual size — with drag-to-pan support. If the image fits the viewport comfortably, zoom is quietly disabled so users are never shown a zoom cursor that does nothing.
Video Support YouTube URLs (both standard and short youtu.be format) are automatically converted to embeds. Local video files (MP4, WebM, OGG) are supported with a custom play button overlay. Both types live alongside images in the same gallery group.
Fullscreen Mode Uses the native browser Fullscreen API with a CSS fallback for environments where the API is unavailable.
Auto-Hide Controls Navigation, thumbnails, and captions can automatically fade out after a configurable idle period for a distraction-free viewing experience.
Keyboard & Touch Full keyboard navigation (arrow keys, Escape, and shortcut keys) and touch/swipe support for mobile and tablet devices.
What’s in the Package?
When you install Zoomora via npm or download the dist files, you get four JavaScript builds and one CSS file:
| File | Format | Use Case |
|---|---|---|
zoomora.umd.js | UMD | Browser <script> tag, WordPress enqueue |
zoomora.umd.min.js | UMD minified | Production <script> tag |
zoomora.es.js | ES Module | Bundlers (Vite, Webpack, Rollup) |
zoomora.es.min.js | ES Module minified | Production bundler builds |
zoomora.css | CSS | All setups — always required |
For most projects you only need zoomora.umd.min.js and zoomora.css.
Browser Support
Zoomora works in all modern browsers:
| Browser | Support |
|---|---|
| Chrome (latest) | ✅ Full support |
| Firefox (latest) | ✅ Full support |
| Safari (latest) | ✅ Full support |
| Edge (latest) | ✅ Full support |
| iOS Safari | ✅ Full support |
| Chrome for Android | ✅ Full support |
| Internet Explorer | ❌ Not supported |
The Fullscreen API has a CSS fallback for browsers or environments (such as some iOS WebViews) where native fullscreen is restricted.
License
Zoomora is released under the MIT License — free for personal, client, and commercial projects. The only requirement is that the original copyright notice is retained in distributed source files.
See the full license on GitHub.