Lightbox

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

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

The lightbox element shows images (with or without captions) or videos inside a fullscreen slideshow modal window. Lightboxes are also responsive across breakpoints, making them useful for displaying media on desktop, tablet, and mobile screens.

In this lesson, you’ll learn:

  1. How to create a lightbox
  2. How to add lightbox media
  3. How to link lightboxes using lightbox groups

How to create a lightbox

Lightbox icon thumbnail

A lightbox is a clickable thumbnail nested in a link block. When site visitors click inside the link’s boundaries on the live site, the lightbox opens to display the media connected to it.

To add a lightbox:

  1. Go to Add panel > Advanced
  2. Click the lightbox element or drag it into the Webflow canvas
The lightbox element is highlighted in the Add panel.

How the lightbox placeholder thumbnail image works

The lightbox contains an image element which behaves like any other image element. You can resize it, double-click to replace the placeholder thumbnail image, and add alt text. Learn more about image elements.

The Image settings for the lightbox placeholder.

You can use the same image for the lightbox thumbnail and the larger lightbox modal window. Webflow automatically creates responsive variants for all inline images. Learn more about responsive images.

The same image is shown in six different sizes: original, 2000px, 1600px, 1080px, 800px and 500px.

How to replace the lightbox thumbnail with other content

You replace the placeholder image element and drag and drop other content (e.g., a heading, or any other non-link elements) inside the lightbox link.

You can 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.

How to style the lightbox

You can style both the lightbox link and its content. For example, if you nest text elements in your lightbox link, you can style the lightbox link element's typography.

You can’t customize the background overlay in the modal window that opens when you click on the lightbox link. However, you can add an image or video and add an image caption if you want.

How to add lightbox media

To add an image and caption to the lightbox modal window:

  1. Select the lightbox link on the canvas
  2. Go to Element settings panel > Lightbox settings > Media
  3. Click the “Add image” icon
  4. Click Choose image
  5. Select an image from the Assets panel
  6. Add a caption in the Caption field
  7. Click Save

You can add as many images to a lightbox link as you want. These images will be displayed as a slideshow inside the lightbox modal window.

Note: Currently, lightbox elements don’t support alt text for images within the lightbox.
The “Add image” button is highlighted in the Media section in Lightbox settings.

To add a video to the lightbox modal window:

  1. Select the lightbox link on the canvas
  2. Go to Element settings panel > Lightbox settings > Media
  3. Click the “Add video” icon
  4. Add the video’s URL to the URL field
  5. Click Save
The “Add video” button is highlighted in the Media section in Lightbox settings.

How to create dynamic lightboxes from Collection field media

You can create dynamic lightboxes by pulling the thumbnail image and/or lightbox media from media Collection fields (i.e., an image field, multi-image field, or video field) in your CMS or Ecommerce Collections.

To connect a dynamic Collection field to the lightbox thumbnail:

  1. Add a lightbox to a dynamically-connected Collection list or a CMS Collection page
  2. Select the placeholder thumbnail image
  3. Go to Element settings > Image settings
  4. Check the box labeled “Get Image from Blog posts” (the Collection name may be different depending on the Collection you’ve selected)
  5. Select an image Collection field from the Select field dropdown

Then, you can connect the lightbox to the Collection field, so your dynamic Collection images are available in the lightbox. To connect a dynamic Collection field to the lightbox media:

  1. Select the lightbox link
  2. Go to Element settings > Lightbox settings > Media
  3. Check the box labeled “Get Media from Blog posts” (the Collection name may be different depending on the Collection you’ve selected)
  4. Select a media Collection field from the Select field dropdown
The “Get Image from Blog posts” checkbox is checked in Image settings and a “Main image” Collection field is chosen in the dropdown.
The “Get Media from Blog posts” checkbox is checked in Lightbox settings and a “Main image” Collection field is chosen in the dropdown.

To connect a lightbox to a multi-image field:

  1. Add a Collection list to a Collection page
  2. Connect the Collection list to the multi-image field by clicking the Source dropdown and selecting the multi-image field
  3. Add a lightbox to the Collection list
  4. Select the image element in the lightbox
  5. Go to Element settings > Image settings
  6. Check the box labeled “Get Image from Blog posts” (the Collection name may be different depending on the Collection you’ve selected)
  7. Select the multi-image field from the Select field dropdown
  8. Select the lightbox link on the canvas
  9. Go to Element settings > Lightbox settings
  10. Check the box labeled “Get Media from Blog posts” (the Collection name may be different depending on the Collection you’ve selected)
  11. Select the multi-image field from the Select field dropdown

Learn more about the multi-image field.

The “Get Image from Blog posts” checkbox is checked in Image settings and a “Blog image” Multi-image Collection field is highlighted in the dropdown.
The “Get Media from Blog posts” checkbox is checked in Lightbox settings and a “Blog image” Multi-image Collection field is highlighted in the dropdown.

How to link lightboxes using lightbox groups

You can link multiple lightboxes together to create a slideshow gallery. When a site visitor clicks a linked lightbox, the lightbox will open all the media associated with the linked group.

How to create a lightbox group

  1. Select any element in a lightbox
  2. Go to Element settings > Lightbox settings
  3. Check “Link with other lightboxes”
  4. 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."

How to link other lightboxes to the same group

To link other lightboxes to the group, complete these steps for each lightbox:

  1. Select any element in the lightbox
  2. Go to Element settings > Lightbox settings
  3. Check “Link with other lightboxes”
  4. Enter the same Group name
A lightbox 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 1 lightbox in a Collection item automatically links all lightboxes in the Collection list.

The lightbox settings section includes a checked box for "get media from products" getting the main image, a checked box for link with other lightboxes and a group name titled 2021 Road trip.

Create multiple lightbox groups on a page

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

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top