A modern, responsive lightbox plugin with zoom, fullscreen, and gallery features
A modern, responsive lightbox plugin with zoom, fullscreen, and gallery features. Perfect for showcasing images and videos in a beautiful, user-friendly interface.
npm install zoomora
yarn add zoomora
<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/zoomora/dist/zoomora.css">
<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/zoomora/dist/zoomora.umd.min.js"></script>
Download the latest release from GitHub Releases and include the files in your project:
<link rel="stylesheet" href="path/to/zoomora.css">
<script src="path/to/zoomora.umd.min.js"></script>
<!-- Add data-zoomora attribute with a unique group ID -->
<img src="image-1.jpg"
data-src="image-1.jpg"
data-zoomora="my-gallery"
alt="Image 1">
<img src="image-2.jpg"
data-src="image-2.jpg"
data-zoomora="my-gallery"
alt="Image 2">
<!-- Initialize (auto-initializes if elements exist) -->
<script>
new Zoomora();
</script>
const lightbox = new Zoomora({
selector: '[data-zoomora]',
showCounter: true,
showThumbnails: true,
showFullscreen: true,
showZoom: true,
transition: 'fade', // 'fade' or 'slide'
maxZoomScale: 3,
animationDuration: 300,
closeOnBackgroundClick: true, // v1.2.0+
autoHideDelay: 3000,
autoHideEnabled: false,
onOpen: (element, index) => {
console.log('Lightbox opened', element, index);
},
onClose: (index) => {
console.log('Lightbox closed', index);
}
});
<div class="gallery">
<img src="thumb-1.jpg"
data-src="full-1.jpg"
data-caption="Beautiful sunset"
data-zoomora="gallery-1"
alt="Sunset">
<img src="thumb-2.jpg"
data-src="full-2.jpg"
data-caption="Mountain view"
data-zoomora="gallery-1"
alt="Mountains">
</div>
<img src="video-poster.jpg"
data-src="video.mp4"
data-type="video"
data-caption="My video"
data-zoomora="media-gallery"
alt="Video">
<img src="video-thumbnail.jpg"
data-src="https://www.youtube.com/watch?v=VIDEO_ID"
data-type="video"
data-caption="YouTube video"
data-zoomora="media-gallery"
alt="Video">
YouTube short URLs also work:
data-src="https://youtu.be/VIDEO_ID"
<img src="image.jpg"
data-src="image.jpg"
data-zoomora="single-image"
alt="Single image">
// Initialize with href attribute instead of data-src
const lightbox = Zoomora.bind('a[data-lightbox]', {
useHref: true
});
<a href="full-image.jpg" data-lightbox="gallery">
<img src="thumbnail.jpg" alt="Image">
</a>
| Option | Type | Default | Description |
|---|---|---|---|
selector | String | '[data-zoomora]' | CSS selector for lightbox triggers |
showCounter | Boolean | true | Show image counter (1 / 5) |
showThumbnails | Boolean | true | Show thumbnail navigation |
showFullscreen | Boolean | true | Show fullscreen button |
showZoom | Boolean | true | Show zoom button |
transition | String | 'fade' | Transition effect: 'fade' or 'slide' |
useHref | Boolean | false | Use href instead of data-src |
maxZoomScale | Number | 3 | Maximum zoom scale |
zoomStep | Number | 0.1 | Zoom step for scroll wheel |
animationDuration | Number | 300 | Animation duration in milliseconds |
closeOnBackgroundClick | Boolean | true | Close lightbox on background click (v1.2.0+) |
showAutoHideToggle | Boolean | true | Show auto-hide toggle button |
autoHideDelay | Number | 3000 | Delay before hiding controls (ms) |
autoHideEnabled | Boolean | false | Enable auto-hide by default |
onOpen | Function | null | Callback when lightbox opens |
onClose | Function | null | Callback when lightbox closes |
onNext | Function | null | Callback when navigating next |
onPrev | Function | null | Callback when navigating previous |
| Key | Action |
|---|---|
← | Previous image |
→ | Next image |
Esc | Close lightbox / Exit fullscreen |
Z | Toggle zoom |
F | Toggle fullscreen |
T | Toggle thumbnails |
const lightbox = new Zoomora();
// Navigate
lightbox.next(); // Go to next item
lightbox.prev(); // Go to previous item
lightbox.goTo(2); // Go to specific index
// Controls
lightbox.open(element); // Open lightbox with element
lightbox.close(); // Close lightbox
lightbox.toggleZoom(); // Toggle zoom
lightbox.toggleFullscreen(); // Toggle fullscreen
lightbox.toggleThumbnails(); // Toggle thumbnails
lightbox.toggleAutoHide(); // Toggle auto-hide controls
// State
lightbox.isOpen(); // Check if open
lightbox.getCurrentIndex(); // Get current index
lightbox.getTotalItems(); // Get total items
// Management
lightbox.refresh(); // Refresh gallery items
lightbox.updateOptions({ // Update options
transition: 'slide'
});
lightbox.destroy(); // Clean up and remove
Zoomora includes beautiful default styles, but you can customize them:
/* Override CSS variables */
:root {
--zoomora-overlay-bg: rgba(0, 0, 0, 0.95);
--zoomora-control-bg: rgba(255, 255, 255, 0.1);
--zoomora-control-hover: rgba(255, 255, 255, 0.2);
}
/* Custom styles */
.zoomora {
/* Your custom styles */
}
See CHANGELOG.md for a detailed list of changes.
closeOnBackgroundClick configuration optionContributions are welcome! Please feel free to submit a Pull Request.
git checkout -b feature/AmazingFeature)git commit -m 'Add some AmazingFeature')git push origin feature/AmazingFeature)This project is licensed under the MIT License - see the LICENSE file for details.
Faruk Ahmed
Made with ❤️ by FrontTheme
FAQs
A modern, responsive lightbox plugin with zoom, fullscreen, and gallery features
We found that zoomora demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.