Image Lightbox

What is an Image Lightbox?

An image lightbox is a multi-functional plugin that handles both image galleries and image "magnification". These use cases used to be covered by Foundation's Clearing Lightbox. Unfortunately, support was dropped for Clearing Lightbox in Foundation 6. In order to keep support for those use cases, this plugin was born.

Important Accessibility Note!
This lightbox shouldn't be used to contain important information that is necessary to be accessed by all users. It is currently meant to house images for "decorative" purposes. It is currently only keyboard accessible, and it is not accessible for a screen reader. Steps should be taken, and they will be noted in the Set Up section, to get screen readers to ignore the buttons that would launch the lightbox.

Set Up

Include the Files

Simply include the following HTML in your head section.

<link rel="stylesheet" type="text/css" href="/framework/styles/css/main/controls/image-lightbox.css" />
<script src="/framework/scripts/touchSwipe.min.js"></script>
<script src="/framework/scripts/image-lightbox.min.js"></script>

 
Gallery Setup

This will consist of two major parts. The first part is what triggers the lightbox to open. The second part contains the rest of the information for the gallery to be made.

1. Opener

The opening button should meet a few requirements:

  • For accessibility reason, it should be a button, not an <a> tag.
  • It must contain the data-open-lightbox attribute that contains a key that matches the correct lightbox.
  • It should have the aria-hidden="true" attribute either on it (recommended), or a parent element, for accessibility reasons.
<button data-open-lightbox="gallery-name" type="button" aria-hidden="true">
  <img src="image-url" alt="">
</button>

 
2. Gallery Images

This part should be placed at the bottom of your page. This will make it easier for editing with the CKEditor to not delete the gallery by accident.

<div class="image-lightbox" data-lightbox="gallery-name" id="gallery-name">
  <button data-caption="Caption text, if desired." data-image="image-url">&nbsp;</button>
  <!-- Any amount of images. Try to not go overboard! -->
  <button data-caption="Caption text, if desired" data-image="image-url">&nbsp;</button>
</div>

 
Single Image Setup

Unlike the full gallery, this consists of only a single part. For this part, there are a few requirements that should be met:

  • It should be a button, not an <a> tag.
  • It must contain the data-open-lightbox attribute, but it must be empty.
  • It should have the aria-hidden="true" attribute either on it (recommended), or a parent element, for accessibility reasons.
<button data-open-lightbox data-image="image-url" data-caption="Image caption, or empty" type="button" aria-hidden="true">
  <img src="image-url" alt="">
</button>

Examples

Full Gallery

Single Image