Use the lightbox element to display images or videos inside a full-screen modal window.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
To connect the lightbox to a Multi-image Field:
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.
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.
If there are multiple lightboxes on the same page, you can separate them by assigning each lightbox group a different name.