BS5 Lightbox - Image Modal Gallery
BS5 Lightbox is a pure JavaScript lightbox gallery component for Bootstrap 5, with no dependencies except for Bootstrap 5 itself. Click on any image to open it in a beautiful modal overlay with navigation controls.
Basic Usage - Single Image
Wrap your images in an anchor tag with data-toggle="lightbox"
attribute:
<a href="path/to/large-image.jpg" data-toggle="lightbox" data-caption="My Image">
<img src="path/to/thumbnail.jpg" class="img-fluid" alt="My Image">
</a>Image Gallery with Navigation
Group multiple images together using data-gallery="gallery-name" to enable navigation between images:
<div class="row">
<div class="col-md-4">
<a href="image1.jpg" data-toggle="lightbox" data-gallery="my-gallery" data-caption="Image 1">
<img src="image1.jpg" class="img-fluid">
</a>
</div>
<div class="col-md-4">
<a href="image2.jpg" data-toggle="lightbox" data-gallery="my-gallery" data-caption="Image 2">
<img src="image2.jpg" class="img-fluid">
</a>
</div>
</div>Features
- Responsive: Works perfectly on all devices and screen sizes
- Keyboard Navigation: Use arrow keys to navigate, ESC to close
- Touch Support: Swipe gestures on mobile devices
- Galleries: Group images and navigate between them
- Captions: Add descriptive text to your images
- Dark Mode: Automatic theme detection and adaptation
- Zero Dependencies: Only requires Bootstrap 5
- Lightweight: Fast loading and smooth animations
Data Attributes
| Attribute | Description |
|---|---|
data-toggle="lightbox"
|
Required to enable lightbox on link |
data-gallery="name"
|
Groups images for navigation |
data-caption="text"
|
Sets caption text for the image |
data-footer="text"
|
Additional footer text (optional) |
data-max-width="800"
|
Maximum width in pixels (optional) |
Advanced Example with All Options
<a href="wallet.png"
data-toggle="lightbox"
data-caption="Cryptocurrency Wallet Interface"
data-footer="UltraViolet PRO - Crypto Dashboard Module"
data-max-width="1200">
<img src="wallet.png" class="img-fluid" alt="Crypto Wallet">
</a>Implementation Notes
Installation
The lightbox is already included in UltraViolet. The CSS and JS are loaded via CDN:
<!-- In plugins.blade.php -->
<link href="https://cdn.jsdelivr.net/npm/bs5-lightbox@1.8.3/dist/index.bundle.min.css" rel="stylesheet">
<!-- In cdn-scripts.blade.php -->
<script src="https://cdn.jsdelivr.net/npm/bs5-lightbox@1.8.5/dist/index.bundle.min.js"></script>Automatic Initialization
The lightbox is automatically initialized on page load for all elements with data-toggle="lightbox". No additional JavaScript required!
Dark Mode Support
The lightbox automatically detects your current theme and adjusts its appearance. In dark mode, the modal backdrop and controls will use dark colors for optimal viewing.