Lightbox

Display images or videos inside a modal that presents the media in a full-screen view using the lightbox component.

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
 
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!

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

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

Create a lightbox

A lightbox is made up of a clickable thumbnail — an image element nested in a link block. On the live site, clicking anywhere inside the boundaries of this link will trigger the lightbox and show the media associated with that lightbox.

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.

Webflow Responsive image variants
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.

 

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 model that opens when you click on the lightbox link, it 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 Elements Settings panel.

Webflow Lighbox Settings

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, choose to get the media from the same image field or from 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, 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
Webflow Lightbox Settings - Groups

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 name of the group.

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 groups of lightboxes on the same page, you can separate them by assigning each lightbox group a different name.

Browser support

Can I Use ? Data on support for the feature across the major browsers from caniuse.com.