Lightbox

The Lightbox element lets you show images (with or without captions), or videos, inside a fullscreen slideshow modal It also works well on all devices, making it easy to show your media for desktop, tablet, and mobile screens.

In this lesson:

1. Create a lightbox
2. Add lightbox media
3. Link lightboxes using lightbox groups

Create a lightbox

A lightbox is a clickable thumbnail, like an image element, nested in a link block. On the live site, clicking inside the link's boundaries will trigger the lightbox and show the media connected with it.

Add a Lightbox component

The native lightbox component has all these elements built-into it. All you need to do to create a lightbox is to use a lightbox component from the Add panel.

Update the Lightbox thumbnail

By default, the Lightbox link contains an image element. This Thumbnail behaves like any other image element. You can resize it, double click to replace it, and add an alt attribute. Learn more about image elements.

You can use the same image for the thumbnail and the larger Lightbox slider view. Webflow automatically creates responsive variants for all inline images. Learn more about Responsive Images.

Use other content instead of the Lightbox thumbnail

You can also delete the default image element and drag and drop other content, such as a heading, or any other non-link elements inside the Lightbox link.

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

Style the lightbox

You can style the lightbox link and the content within. For example, if you add text elements in your lightbox link, you can style the lightbox link element's typography to override default link typography styles.

As for the lightbox itself, the modal that opens when you click on the lightbox link - isn't customizable. Meaning, you cannot customize the background overlay, the images, and the captions. If you need a fully customizable lightbox, you can use interactions to create one.

Add lightbox media

After you've structured and styled the lightbox link and its content, you can choose the media (images or videos) you want to display when the lightbox is triggered. You can do this in the Lightbox settings found in the Element settings panel.

Add images

To add the images, select the lightbox and click the image icon in the Element Settings panel → Lightbox settings. Then select an image from the Asset Panel or upload one.

Add as many images as you need through the same process.

Add videos

To add videos, select the lightbox and click the video icon in the Element Settings panel → Lightbox settings. Then, paste the video link from a third-party site like YouTube or Vimeo.

Add image captions

If you choose an image as the media, you have the option to add a caption. The caption for the image will appear directly below the image.

Get media from Collections

You can get create dynamic lightboxes by getting the placeholder image as well as the lightbox media from media Collection Fields (Image Field, Multi-image Field, or Video Field) in CMS or Ecommerce Collections.

1. Add a lightbox in a Collection list or a Collection page
2. Select the placeholder image
3. In the Image settings, choose to get the image from an image field
4. In the Lightbox settings, you can choose to get the media from the same image field or a video field

To connect the lightbox to a Multi-image Field:

1. Add a Collection list on the Collection page
2. Connect the Collection List to the Multi-image Field
3. In the Image settings, choose to get the image from the Multi-image Field
4. In the Lightbox settings, you can choose to get the media from the Multi-image Field

Learn more about the Multi-image Field.

Link lightboxes using Lightbox groups

You can link multiple lightboxes together to create a slideshow gallery. Clicking a linked lightbox will open all the media associated with the linked group.

Create a Lightbox group

1. Select any element within the lightbox
2. Enable “Link with other lightboxes” in the Element Settings panel →  Lightbox settings
3. Enter a Group Name

Link other lightboxes to the same group

To link lightboxes, repeat the steps mentioned above for each lightbox you want to link to a group and type in the group's name.

For lightboxes in Collection lists, creating and linking one lightbox in a Collection item will automatically link 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 name.