Lightbox

A modal gallery used to display media assets and content.

Dependencies

• Menu
• Menu Bar
• Modal Window
• Swipe Content
• Slideshow

How to

The Lightbox component is used to create modal galleries. It allows for different type of content: media elements (image/video/iframe) with or without a caption, and text content.

Lightbox control #

To connect the Lightbox to its trigger (e.g., button), make sure the id value of the first one is equal to the aria-controls value of the second one.

If you want to open a specific slide, add to the trigger a data-lightbox-item equal to the id of the slide you want to show first.

<button data-lightbox-item="slide-1" aria-controls="lightboxExample">Show Lightbox</button>

<div class="modal lightbox js-modal js-lightbox" id="lightboxExample" data-animation="on">
  <div class="lightbox__content">
    <header class="lightbox__header">
      <!-- ... -->
    </header>

    <div class="lightbox__body slideshow slideshow--transition-fade js-lightbox__body" data-swipe="on" data-navigation="off">
      <p class="sr-only">Modal Gallery Slideshow</p>

      <ul class="slideshow__content js-lightbox__slideshow">
        <li id="slide-1" class="slideshow__item js-slideshow__item">
          <!-- ... -->
        </li>

        <!-- ... -->
      </ul>
    </div>
  </div>
</div>

Gallery Slideshow #

The Lightbox gallery is based on the Slideshow component. Some of its features are:

• Swipe on mobile: this is enabled adding a data-swipe='on' to the .lightbox__body element;
• Keyboard navigation;
• Lazy loading of media elements;
• Different slide animations: fade effect (add the .slideshow--transition-fade class to the .lightbox__body element) or slide effect (add the .slideshow--transition-slide class).

Lazy loading #

If you want to lazy load the media items (images/videos/iframes) in the gallery, you can:

• Add a data-src equal to the path of the asset you want to load;
• For image elements, set the src attribute equal to a placeholder image path (visible while the image is being loaded).

Gallery Content #

You can show different type of content in your modal gallery. Here's the list of content you can use.

Images #

For images, the <li> element will look like:

<li class="slideshow__item js-slideshow__item">
  <figure class="lightbox__media" data-media="img">
    <div class="lightbox__media-outer js-lightbox__media-outer">
      <div class="lightbox__media-inner js-lightbox__media-inner">
        <img data-src="img-path.jpg" src="preview.svg" alt="Image Info">
      </div>
    </div>
            
    <figcaption class="lightbox__caption">Caption for image</figcaption>
  </figure>
</li>

Videos #

For videos, the <li> element will look like:

<li class="slideshow__item js-slideshow__item">
  <figure class="lightbox__media" data-media="video"> 
    <div class="lightbox__media-outer js-lightbox__media-outer">
      <div class="lightbox__media-inner aspect-ratio-16:9 js-lightbox__media-inner">
        <video data-src="video-path.mp4" autoplay loop muted playsInline></video>
      </div>
    </div>
            
    <figcaption class="lightbox__caption">Caption for image</figcaption>
  </figure>
</li>

iframes #

For iframes, the <li> element will look like:

<li class="slideshow__item js-slideshow__item">
  <figure class="lightbox__media" data-media="video"> 
    <div class="lightbox__media-outer js-lightbox__media-outer">
      <div class="lightbox__media-inner aspect-ratio-16:9 js-lightbox__media-inner">
        <iframe data-src="https://www.youtube.com/embed/mYocfuqu2A8"></iframe>
      </div>
    </div>
            
    <figcaption class="lightbox__caption">Caption for image</figcaption>
  </figure>
</li>

Text components #

The Lightbox gallery can include text items. The <li> element will look like:

<li class="slideshow__item js-slideshow__item">
  <div class="lightbox__text-outer text-component max-width-sm">
    <div class="lightbox__text">
      <!-- content here -->
    </div>
  </div>
</li>

Thumbnail Preview #

If you want to add a thumbnail preview for each item in the gallery, set a data-thumb equal to the path of the preview. Each item of the gallery will require a data-thumb attribute.

The <li> element will look like:

<li class="slideshow__item js-slideshow__item">
  <figure class="lightbox__media" data-media="img">
    <div class="lightbox__media-outer js-lightbox__media-outer">
      <div class="lightbox__media-inner js-lightbox__media-inner">
        <img data-src="img-path.jpg" src="preview.svg" data-thumb="thumb-img-path.jpg" alt="Image Info">
      </div>
    </div>
            
    <figcaption class="lightbox__caption">Caption for image</figcaption>
  </figure>
</li>

To display the image thumbnails, you'll need to include the footer.js-lightbox_footer (where the list of thumbnails will be created in JavaScript). Take a look at the demo HTML for more details. If you don't include this element, the thumbnails won't be viisble.

Dynamic Initialization #

If your lightbox gallery is dynamically added to your page, you can initialize it using the Lightbox object:

var dynamicLightbox = document.getElementsByClassName('js-dynamic-lightbox');
new Lightbox(dynamicLightbox[0]);

Demo Assets #

⭐️ Icons by Nucleoapp.

🌅 Demo photos:

• Photo by Joseph Gonzalez on Unsplash
• Photo by Charles on Unsplash
• Photo by Monika Grabkowska on Unsplash
• Photo by Annie Spratt on Unsplash

Categories

• Content and Layout > Gallery
• Plugins > Slideshow
• Overlays

Bug report & feedback

Component Github page ↗