Lightbox

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

Install/Update Lightbox

Adding a Lightbox

Insert a Lightbox template from the Library.

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

Anatomy

A Lightbox is usually composed by:

A Dialog to manage the immersive view

A Carousel to display the images

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.

Guides

Add Lightbox to existing image

To replace an existing image with the Lightboxed version:

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

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

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

Add a Lightbox Carousel from the library next to your Carousel

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

Find the CarouselSlides inside the Carousel you just dragged

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

Remove lingering components like Trigger Images Box

Open the Dialog and click one of the highlighted images

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