Lightbox

The lightbox element shows images (with or without captions) or videos inside a fullscreen slideshow modal window. Lightboxes are also responsive across breakpoints, making them useful for displaying media on desktop, tablet, and mobile screens.

How to create a lightbox

A lightbox is a clickable thumbnail nested in a link block. When site visitors click inside the link’s boundaries on the live site, the lightbox opens to display the media connected to it. You can add a lightbox from Add panel > Advanced.

How the lightbox placeholder thumbnail image works

The lightbox contains an image element which behaves like any other image element. You can resize it, double-click to replace the placeholder thumbnail image, and add alt text. Learn more about image elements.

You can use the same image for the lightbox thumbnail and the larger lightbox modal window. Webflow automatically creates responsive variants for all inline images. Learn more about responsive images.

How to replace the lightbox thumbnail with other content

You replace the placeholder image element and drag and drop other content (e.g., a heading, or any other non-link elements) inside the lightbox link.

You can also use a div block and apply a background image to create equal-sized image thumbnails.

How to style the lightbox

You can style both the lightbox link and its content. For example, if you nest text elements in your lightbox link, you can style the lightbox link element's typography.

You can’t customize the background overlay in the modal window that opens when you click on the lightbox link. However, you can add an image or video and add an image caption if you want.

How to add lightbox media

To add an image and caption to the lightbox modal window:

1. Select the lightbox link on the canvas
2. Go to Element settings panel > Lightbox link settings > Media
3. Click the “Add list item” icon
4. Choose "Image" as the Type
5. Click Replace image
6. Select an image from the Assets panel
7. Add a Caption if needed

You can add as many images to a lightbox link as you want. These images will be displayed as a slideshow inside the lightbox modal window.

Note: Currently, lightbox elements don’t support alt text for images within the lightbox.

To add a video to the lightbox modal window:

1. Select the lightbox link on the canvas
2. Go to Element settings panel > Lightbox link settings > Media‍
3. Click the “Add list item” icon
4. Choose "Video" as the Type
5. Add the video’s URL to the URL field
6. Add a Title if needed

How to create dynamic lightboxes from Collection field media

You can create dynamic lightboxes by pulling the thumbnail image and/or lightbox media from media Collection fields (i.e., an image field, multi-image field, or video field) in your CMS or Ecommerce Collections.

To connect a dynamic Collection field to the lightbox thumbnail:

1. Add a lightbox to a dynamically-connected Collection list or a CMS Collection page
2. Select the placeholder thumbnail image
3. Go to Element settings > Image settings
4. Click the "purple dot" icon in the Image field
5. Select an image Collection field

Then, you can connect the lightbox to the Collection field, so your dynamic Collection images are available in the lightbox. To connect a dynamic Collection field to the lightbox media:

1. Select the lightbox link
2. Go to Element settings > Lightbox link settings
3. Click the "purple dot" icon in the Media field
4. Select a media Collection field

To connect a lightbox to a multi-image field:

1. Add a Collection list to a Collection page
2. Connect the Collection list to the multi-image field by clicking the Source dropdown and selecting the multi-image field
3. Add a lightbox to the Collection list
4. Select the image element in the lightbox
5. Go to Element settings > Image settings
6. Click the "purple dot" icon in the Image field
7. Select the multi-image field
8. Select the lightbox link on the canvas
9. Go to Element settings > Lightbox link settings
10. Click the "purple dot" icon in the Media field
11. Select the multi-image field

You can also connect a lightbox to a multi-image field when the lightbox is added to Collection lists or Collection pages.

How to link lightboxes using lightbox groups

You can link multiple lightboxes together to create a slideshow gallery. When a site visitor clicks a linked lightbox, the lightbox will open all the media associated with the linked group.

How to create a lightbox group

1. Select any element in a lightbox
2. Go to Element settings > Lightbox settings
3. Enter a group name in the Match or create a group name field

Lightboxes using the same group name are linked in a group.

For lightboxes in Collection lists, creating and linking one lightbox in a Collection item automatically links all lightboxes in the Collection list.

Create multiple lightbox groups on a page

If there are multiple lightboxes on the same page, you can separate them by assigning each lightbox group a different Group name.