Lightbox • Natura11y

There is a newer version of Naturally.

Moonlight shining through clouds at night

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


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>
    
Figure 2

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.