How do I add a lightbox in Webflow?

Add the thumbnail people click

A lightbox is a link with a thumbnail inside it. On the live site, a click anywhere inside that link opens a full-screen slideshow. The modal can hold images, with or without captions, or a video. It stays usable on desktop, tablet, and phone.

Open the Add panel, then Advanced, and add a lightbox. The placeholder inside it is a normal image. Double-click it to replace the picture, resize it, and set alt text on that thumbnail. You can use the same file for the thumbnail and for the large view. Webflow creates responsive variants for inline images, including this thumbnail.

You can remove the placeholder image and put other content in the link instead, such as a heading. Do not put another link inside it. A div block with a background image is another way to keep a row of thumbnails the same size. Style the link and the content inside it, including type if you nest text. You cannot restyle the dark overlay behind the open modal.

Add each image or a video to the modal

The thumbnail and the modal media are separate. Select the lightbox link. Open Element settings, then Lightbox link settings, then Media. Click Add list item. Choose Image. Click Replace image, pick a file from Assets, and add a caption if the photo needs one. Repeat for each photo that should play in that one click. They appear as a slideshow.

Example: a project page has three photos. One lightbox uses the lobby photo as the thumbnail. Under Media you add Lobby, Desk, and Evening, each with a short caption. A visitor who clicks the lobby photo can move through all three.

A video uses the same Media list. Add a list item, choose Video, paste the video URL, and add a title if you want one. That URL is the video itself, not a second copy of the YouTube element's playback settings. Images inside the modal do not support alt text, so the thumbnail alt text is the description you can set.

Give one gallery a shared group name

Separate lightbox links can still open as one slideshow. Select any element in a lightbox. Open Element settings, then Lightbox settings. Type a name in Match or create a group name. Every lightbox that uses that exact name is one group. A click on any of them opens all of the media in the group.

A case study with three thumbnails should use one name, such as Harbor office. A second gallery on the same page, such as a product shoot, needs a different name. If both groups reuse Harbor office, one click mixes the two sets.

On a Collection list, you do not repeat that name on every item. Create and link one lightbox in the list, and Webflow links the lightboxes for the other items in that list. If the page should keep those item galleries separate, give each group its own name before you rely on the automatic link.

Connect a CMS image or video

On a Collection list or a Collection page, the thumbnail and the modal can both come from CMS fields.

Add the lightbox inside the list or on the template. Select the placeholder thumbnail. In Element settings, Image settings, use the purple dot on the image and choose the image field. Then select the lightbox link. In Lightbox link settings, use the purple dot on Media and choose the same image field, or a video field if the modal should open a video. For a video field, Lightbox settings is where you get the media from that field.

A multi-image field needs one extra list. On the Collection page, add a Collection list and set its source to the multi-image field. Put a lightbox inside that list. Bind the thumbnail image and the lightbox media to the multi-image field. Each file in the field can then open from its own thumbnail, in the order stored on the item.

Publish, then click the live thumbnail

Save the page and publish the site. Open the live URL and click the thumbnail, not only the Designer canvas. The modal should show the first image or the video, and the captions you typed. Move to the next slide. If the wrong photos appear, check the group name and whether the list is bound to the field or to the whole Collection.

If the thumbnail has no alt text, set it before you publish again. The large images in the modal still will not have their own alt text. Write the caption so a sighted visitor can tell the photos apart, and keep the thumbnail description useful for someone who does not see the picture.