Photo by Jack Taylor
Lightbox
Introduction
Natura11y's lightbox component provides an intuitive way to enlarge images and video. The lightbox is designed for simplicity in setup and use. Fully-integrated, it works out-of-the-box with:
- High-resolution images
- Local video files
- YouTube videos
- Vimeo videos
Lightboxes have keyboard support for focusable elements. Use the Tab, Forward, and Back keys without leaving the lightbox by accident. Using the Esc key closes it.
When a lightbox closes, keyboard users return to the last active element in the document.
Lightbox Thumbnail Buttons
For an easy way to add a lightbox functionality to your website, use the .lightbox-thumbnail class and required data attributes to a <button> tag. Include a small image or video thumbnail inside the button.
Natura11y's JavaScript looks for these attributes and applies the lightbox effect accordingly. The .lightbox-thumbnail class automatically adds the appropriate enlarge icon for images or videos. With Figure 1 below, the first button is an image lightbox and the second button is a video lightbox.
Photo by eberhard 🖐 grossgasteiger on Unsplash
Video by Dmitry Varennikov from Pexels:
<!-- Image Lightbox -->
<button
class="lightbox-thumbnail"
👉 data-lightbox="image"
👉 data-lightbox-src="/path/to/image.jpg"
👉 data-lightbox-caption="..."
>
<img
src="./_assets/eberhard-grossgasteiger-yF9Tm4qrYmM-unsplash.jpg"
alt="Placeholder"
/>
</button>
<!-- Video Lightbox -->
<button
class="lightbox-thumbnail"
👉 data-lightbox="video"
👉 data-lightbox-src="/path/to/video.mp4"
👉 data-lightbox-caption="..."
>
<img
src="./_assets/eberhard-grossgasteiger-yF9Tm4qrYmM-unsplash.jpg"
alt="Placeholder"
/>
</button>
| Line # | Details |
|---|---|
| 3-6 | The The It is used to initiate the lightbox script. Set the value to "image" for an image lightbox or "video" for a video lightbox. The For image lightboxes, if no |
| 6 | The |
Custom Lightbox Buttons
If you want to use a custom button, you can do so by adding the required data-lightbox attributes to a <button> tag. In Figure 2, generic buttons are used to initiate the lightbox.
<button
class="button theme-primary width-100 margin-bottom-3"
👉 data-lightbox="video"
👉 data-lightbox-src="https://www.youtube.com/embed/XXXXXXXXXX"
👉 data-lightbox-caption="YouTube video"
>
Open YouTube Video
</button>
Lightbox Gallery
The lightbox gallery functionality in Natura11y is activated automatically. Upon page load, the JavaScript scans the Document Object Model (DOM) for any button marked with the necessary data attributes. Every instance located, whether an image or video, is auto-populated into the lightbox 'gallery'. Once the lightbox is active, users can navigate through the gallery using the Forward and Back buttons.
Take a look at the grid of images below. Did you notice these images and all other lightboxes from this page are incorporated into the gallery?
Upper left image by Benjamin Child. Upper right image by zan douglas. Bottom left image by Noah Silliman. Bottom right image by Marcus Dall Col.