Havoc's Vanilla JavaScript plugin for displaying images in an overlay lightbox.
- Modern Dialog API: Uses native HTML
<dialog>element for better accessibility - Responsive Design: Automatically adapts to different screen sizes and orientations
- Touch Support: Swipe gestures for navigation on mobile devices
- Keyboard Navigation: Arrow keys for previous / next navigation
- Image Counter: Shows current position in gallery (e.g., "1 / 3")
- Optional Captions: Display custom captions for each image
- Smooth Animations: CSS-based animations for opening / closing
- Theme Support: Automatic light / dark theme detection
- Zero Dependencies: Pure vanilla JavaScript, no external libraries required
This plugin requires a modern browser that supports JavaScript ES6+, HTML5 <dialog> element, and CSS3.
Download the plugin files and include them in your project:
<link rel="stylesheet" href="dist/css/havLightbox.css">
<script src="dist/js/havLightbox.js"></script>// Initialize havLightbox (optional - will auto-initialize on first use)
havLightboxInit();
const images = [
'image1.jpg',
'image2.jpg',
'image3.jpg'
];
havLightboxOpen('My Gallery', images, 0);const imagesWithCaptions = [
{ src: 'image1.jpg', caption: 'Image 1' },
{ src: 'image2.jpg', caption: 'Image 2' },
{ src: 'image3.jpg', caption: 'Image 3' }
];
havLightboxOpen('My Gallery', imagesWithCaptions, 0);<img src="thumbnail1.jpg" alt="Thumbnail 1" onclick="openGallery(0)">
<img src="thumbnail2.jpg" alt="Thumbnail 2" onclick="openGallery(1)">
<img src="thumbnail3.jpg" alt="Thumbnail 3" onclick="openGallery(2)">
<script>
const images = [
{ src: 'image1.jpg', caption: 'Image 1' },
{ src: 'image2.jpg', caption: 'Image 2' },
{ src: 'image3.jpg', caption: 'Image 3' }
];
function openGallery(index) {
havLightboxOpen('My Gallery', images, index);
}
</script><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>havLightbox</title>
<link rel="stylesheet" href="dist/css/havLightbox.css">
</head>
<body>
<h1>My Gallery</h1>
<div class="gallery">
<img src="thumbnail1.jpg" alt="Thumbnail 1" onclick="openGallery(0)" style="cursor: pointer; margin: 5px;">
<img src="thumbnail2.jpg" alt="Thumbnail 2" onclick="openGallery(1)" style="cursor: pointer; margin: 5px;">
<img src="thumbnail3.jpg" alt="Thumbnail 3" onclick="openGallery(2)" style="cursor: pointer; margin: 5px;">
</div>
<script src="dist/js/havLightbox.js"></script>
<script>
const images = [
{ src: 'image1.jpg', caption: 'Image 1' },
{ src: 'image2.jpg', caption: 'Image 2' },
{ src: 'image3.jpg', caption: 'Image 3' }
];
function openGallery(startIndex) {
havLightboxOpen('My Gallery', images, startIndex);
}
</script>
</body>
</html>Initializes havLightbox with optional configuration.
Parameters:
options(Object, optional): Configuration optionstitleFallback(String): Default title when none provided (default: "havlightbox")template(String): Custom HTML template for the havLightbox dialog structuredocument(Document): Document object to use (default:window.document)
Returns: havLightbox instance object
Opens havLightbox with specified images.
Parameters:
title(String): Title to display in the headerimages(Array): Array of image sources (strings or objects withsrcandcaption)startIndex(Number, optional): Index of image to start with (default: 0)options(Object, optional): Configuration options (same ashavLightboxInit)
Closes the currently open havLightbox.
Manually triggers a layout update (useful after dynamic content changes).
Returns the current image index.
Returns: Number - Current image index
Returns a copy of the current images array.
Returns: Array - Copy of current images
- Keyboard: Use left / right arrow keys to navigate
- Touch: Swipe left / right on mobile devices
- Mouse: Click the navigation buttons (← →)
- Close: Click the × button, press Escape, or click the backdrop
havLightbox automatically detects and adapts to light / dark themes based on:
data-themeattribute on:rootorbody- CSS classes:
.theme-dark,.theme-light,.dark-mode,.light-mode - System preference via
prefers-color-scheme
Feel free to suggest features or report issues. However, please note that pull requests will not be accepted.
Copyright © 2024-2025 René Nicolaus
This plugin is released under the MIT license.