Photo: Jack Taylor
Lightbox
Introduction
Natura11y’s lightbox opens images and video in an overlay. It works with:
- High-resolution images
- Local video files
- YouTube videos
- Vimeo videos
Lightbox thumbnail buttons
Use a <button> with the required data-lightbox attributes to open a lightbox.
Add .lightbox-thumbnail when the button contains an image or video thumbnail. Figure 1 shows an image lightbox and a video lightbox.
For image lightboxes, Natura11y reuses the thumbnail image’s alt text for the enlarged image. Use data-lightbox-alt when the enlarged image needs different alternative text; use an empty value when the enlarged image is decorative in context.
Photo by eberhard grossgasteiger on Unsplash
Video by Dmitry Varennikov from Pexels:
1<!-- Image lightbox -->2<button3 class="lightbox-thumbnail"4 data-lightbox="image"5 data-lightbox-src="/path/to/image.jpg"6 data-lightbox-caption="..."7>8 <img9 src="/path/to/thumbnail.jpg"10 alt="..."11 />12</button>13
14<!-- Video lightbox -->15<button16 class="lightbox-thumbnail"17 data-lightbox="video"18 data-lightbox-src="/path/to/video.mp4"19 data-lightbox-caption="..."20>21 <img22 src="/path/to/thumbnail.jpg"23 alt="..."24 />25</button>| Lines | Details |
|---|---|
| 3 | The |
| 4 | The |
| 5 | The |
| 6 | The |
Custom lightbox buttons
Any button can open a lightbox when it includes the required data-lightbox attributes. Figure 2 uses a standard button.
1<button2 class="button theme-primary width-100"3 data-lightbox="video"4 data-lightbox-src="https://www.youtube.com/embed/XXXXXXXXXX"5 data-lightbox-caption="YouTube video"6>7 Open YouTube Video8</button>Lightbox gallery
Natura11y’s JavaScript automatically collects every [data-lightbox] trigger on the page into one gallery. When more than one lightbox item exists, visitors can move through the gallery with the Previous and Next buttons or the Left Arrow and Right Arrow keys.
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.
Related custom properties
Lightbox layout, appearance, motion, and thumbnail icons can be customized by redefining the related CSS custom properties.
:root { --lightbox-padding-x: var(--spacer-2); --lightbox-padding-y: var(--spacer-2); --lightbox-text-color: hsl(0, 0%, 100%); --lightbox-overlay-color: hsl(0, 0%, 0%); --lightbox-overlay-opacity: 0.8; --lightbox-media-border-radius: 0; --lightbox-media-shadow: 0 0.125rem 1rem 0.5rem rgba(0, 0, 0, 0.25); --lightbox-z-index: 10000; --lightbox-caption-text-align: center; --lightbox-animation-duration: 0.35s; --lightbox-animation-translate-x: 2rem; --lightbox-thumbnail-icon-image: "\f160"; --lightbox-thumbnail-icon-video: "\f163";}| Custom property | Default | Purpose |
|---|---|---|
--lightbox-padding-x | var(--spacer-2) | Inline padding inside the lightbox viewport. |
--lightbox-padding-y | var(--spacer-2) | Block padding inside the lightbox viewport. |
--lightbox-text-color | hsl(0, 0%, 100%) | Text and control color displayed over the lightbox overlay. |
--lightbox-overlay-color | hsl(0, 0%, 0%) | Background color of the lightbox overlay. |
--lightbox-overlay-opacity | 0.8 | Opacity of the lightbox overlay and thumbnail overlays. |
--lightbox-media-border-radius | 0 | Border radius applied to displayed lightbox media. |
--lightbox-media-shadow | 0 0.125rem 1rem 0.5rem rgba(0, 0, 0, 0.25) | Box shadow applied to displayed lightbox media. |
--lightbox-z-index | 10000 | Stacking level of the lightbox above page content. |
--lightbox-caption-text-align | center | Text alignment of lightbox captions. |
--lightbox-animation-duration | 0.35s | Duration of lightbox overlay and media transitions. |
--lightbox-animation-translate-x | 2rem | Horizontal travel distance for gallery navigation transitions. |
--lightbox-thumbnail-icon-image | "\f160" | Icon-font glyph displayed on image thumbnails. |
--lightbox-thumbnail-icon-video | "\f163" | Icon-font glyph displayed on video thumbnails. |
