Go to homepage

Projects /

Lightbox

A modal gallery used to display media assets and content.

View Demo

Dependencies

Compatible CSS frameworks:

Component dependencies:

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>

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:

Categories

Bug report & feedback

Component Github page ↗

Level up your CSS skills

Each month we email a 1-minute CSS tutorial to 20K developers

Awesome! We just sent you a confirmation link by email

Error - please try again or contact us

Your email address is already subscribed

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.