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

In this lesson
  • Adding a lightbox
  • Anatomy of a lightbox - the lightbox link and thumbnails
  • Lightbox settings - adding media and linking multiple ;ightboxes together

Adding a lightbox

You can drag and drop a lightbox from the Elements Panel. In the example below, a lightbox is added to the third column in a row.

Once the lightbox is added onto the canvas, you will see the thumbnail image has a placeholder. You can replace this placeholder image with the media you are going to use in the lightbox or any other image you choose.

 

Anatomy of a lightbox

A lightbox looks very similar to an image element. This is because the default structure of the lightbox contains an image element thumbnail placeholder wrapped by a lightbox Link.

Webflow Lightbox component anatomy

Lightbox Link

The lightbox link is very similar to 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.

Image thumbnails

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

Other content

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.

 

Lightbox settings

After you’ve structured and styled the lightbox link and its content, you can choose the media you want to display when the lightbox is triggered. You can do this in the Lightbox Settings which is found in the Elements Settings Panel. 

Webflow Lighbox Settings

Media

The media are the image or video that you want displayed in the full-screen slider when a user clicks on the lightbox link.

To choose the media for your lightbox, follow these steps:

  1. Select the lightbox link or any element inside
  2. Go to the Element Settings Panel
  3. Under Lightbox Settings, click on the image or video icon
 

Choosing image here will prompt you to select an image from the Asset Manager. When you choose video, you can paste a 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.

 
Need to know
  • The lightbox that opens when you click on the lightbox link isn't customizable. Meaning, you cannot customize the background overlay, the images, and the captions. You can create use interactions to create a fully customizable lightbox.

Groups

You can link multiple lightboxes together to create a slideshow gallery.

  1. Select any element within the lightbox Link or any element inside
  2. Go to the Element Settings Panel
  3. Under Lightbox Settings, enable “Link with other lightboxes”
  4. In the Group Name field provided, enter a name
  5. Repeat these steps for each lightbox you want in that group
Webflow Lightbox Settings - Groups

Once the lightboxes have been linked, clicking one Lightbox Link will open all the media associated with that group name.

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