Lightbox

The Lightbox library provides a set of components and templates for displaying images or videos in an immersive modal view.

Adding a Lightbox

  1. Insert a Lightbox template from the Library.

  2. Add/Edit/Modify the images or videos to match your assets

Anatomy

A Lightbox is usually composed by:

The library also includes two code components:

  • LightboxWrapper - used in Carousel versions, this component manages the rendered Slide

  • LightboxImage - ensures the image is rendered correctly

  • LightboxTrigger - opens the Dialog on the matching Carousel Slide

Templates

In this section you can find pre-built templates of Lightbox, but we plan on creating a lot more: carousels with thumbnails, with descriptions, with titles, zoom, etc.. If you wish to see a specific template or have ideas to share on the existing ones, let us know on Discord.

Lightbox Carousel

This template ships a carousel-like version of the Lightbox. If you require more than one image to be displayed on the Dialog, this template should be your choice.

Lightbox Single Image

If you’re looking for a single image to be highlighted and don’t want to deal with the complexity of a carousel, this template is ideal.

Lightbox Video

This template ships a Video version of the Lightbox.

Embedding the template as iframe in this page below is causing the video to be opened by the docs platform we are using. Close the dialog to see how this is supposed to work/function to begin with.

As of v1.0.3 of the Lightbox library, there is a small bug in the way this template is composed.

See this bug report.

Guides

Add Lightbox to existing image

To replace an existing image with the Lightboxed version:

  1. Add a Lightbox Single Image from the library next to your image.

  2. Replace the Image (or its src) inside LightboxTrigger with your existing image.

  3. Replace the Image (or its src) inside LightboxImage with your existing image.

LightboxImage will control the size of the image. You might need to clear the styles of the Image inside it.

Add Lightbox to existing Carousel

  1. Add a Lightbox Carousel from the library next to your Carousel.

  2. Drag your existing Carousel next to Trigger Images Box (LightboxWrapper > Dialog).

  3. Find the CarouselSlides inside the Carousel you just dragged.

  4. Copy a LightBoxTrigger into each CarouselSlide and replace the Image inside it with your existing Image.

  5. Remove lingering components like Trigger Images Box.

  6. Open the Dialog and click one of the highlighted images.

  7. Inside each LightboxImage, replace Image (or its src) with your existing image.

The number of images you need might not match the number of images in the template. Feel free to delete or duplicate existing ones to match your needs.

The order of LightBoxTrigger and LightboxImage should match to ensure the correct image opens when clicked.