Lightbox • Natura11y Design Ecosystem

Natura11y’s lightbox opens images and video in an overlay. It works with:

High-resolution images
Local video files
YouTube videos
Vimeo videos

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.

A full moon behind mountains — Photo by eberhard grossgasteiger on Unsplash

A beautiful moonrise time-lapse — Photo by eberhard grossgasteiger on Unsplash

Figure 1 notes
Lines	Details
3	The `.lightbox-thumbnail` class is optional. It adds the thumbnail overlay icon.
4	The `data-lightbox` attribute is required. Use `image` for images and `video` for videos.
5	The `data-lightbox-src` attribute sets the media source. For image lightboxes, it can be omitted when the child image `src` should be used.
6	The `data-lightbox-caption` attribute is optional. It is used to add a caption to the lightbox.

Any button can open a lightbox when it includes the required data-lightbox attributes. Figure 2 uses a standard button.

1
<button
2
  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 Video
8
</button>

Figure 2

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.

Introduction

Lightbox Thumbnail Buttons

Custom Lightbox Buttons

Lightbox Gallery

Read Next

Modal

Accessibility

Button