Lightbox

Use the lightbox element to display images or videos inside a full-screen modal window.

This video features an old UI. Updated version coming soon!

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.

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.

Step one on the left, select the lightbox element from the components section and drag it into place. Step two on the right, click on the image settings icon and click on the "choose image button".

Step three on the left, select the image desired from the assets panel. Step four on the right, preview the placed image in the lightbox container.

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.

On the left, an image element is being resized by clicking and dragging the bottom right anchor point of the image box. On the right, the image settings includes a highlighted area called Alt Text with a custom description of the image on the left. The alt text begins with "Gray concrete road during...".

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.

The same image is shown in six different sizes. To demonstrate the responsiveness of the image the different sizes display are original, 2000px, 1600px, 1080px, 800px and 500px. — Responsive Images feature creates size variants for all images in your project.

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.

A lightbox link includes an image of the Sutro baths in San francisco. There is a H1 headline and paragraph text included. The H1 text is Sutro Baths. The paragraph text is San Francisco, CA.

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.

The lightbox settings panel includes a button to add an image, a button to add a video, the name and thumbnail of an image already added with a delete icon to the right. There is also a check box for linking with other lightboxes.

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.

Step one on the left, click on the image icon in the lightbox settings panel. Step two on the right, click on the "choose image" button then select the image from the assets panel.

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.

Step one on the left, enter the caption text in the caption input field in the Add image pop up menu. Step two on the right, preview the caption at the bottom left of the added lightbox 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.

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

Step one on the left, select the image thumbnail placeholder. Step two on the right, under the image settings panel, select the main image option from the collection list "get image from" menu.

Step three on the left, select the light box link element. Step four on the right, select the main image option from the collection list "get media from" drop down menu within the Lightbox settings panel.

Five light box elements have been added to a collection list. These image are being added through a get media from a collection list feature.

To connect the lightbox to a Multi-image Field:

Add a Collection list on the Collection page
Connect the Collection List to the Multi-image Field
In the Image settings, choose to get the image from the Multi-image Field
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

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

The lightbox settings panel includes a add image icon, add video icon, file name and thumbnail with a delete icon, a checked box for "link with other lightboxes" and a group name titled "2021 Road trip."

‍

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.

A light box group containing four images is previewing an image of the Sutro baths, San Francisco. There is a caption added that reads "Sutro baths, San Francisco"

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