Lesson info

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

In this video, we’ll cover: 

  1. Adding a lightbox to your website
  2. Anatomy of a lightbox: the lightbox link and thumbnails
  3. Lightbox settings: adding media and linking multiple lightboxes together

Assets

Want to follow along with this lesson? Fortunately, we created a zip file which contains all the assets used in the project, and we've included that link 

right here
.

Transcript

A lightbox is an extraordinary way to keep users on your page while drawing their attention to visual content. Like images or videos.

There are four topics we're going to cover: anatomy of a lightbox, thumbnails (what we’re pressing to trigger the lightbox), media (the content that shows up inside the lightbox), and linking multiple lightboxes.

We'll start with anatomy. And now we'll move on to anatomy of a lightbox.

In a project, a lightbox link looks very much like an image. In fact, that's the default structure. It's an image element — that's our thumbnail image — and it's wrapped with — it's inside a lightbox link.

Just like any link block, we can add or remove content inside our lightbox link. And also like any link block, pressing anywhere inside the boundaries of this lightbox will trigger the lightbox link.

When we go to preview and press our lightbox link, the lightbox is triggered. That image or video that pulls up, that's our media.

And that's the basic anatomy of a lightbox link.

Let's look at the thumbnail more closely.

You can drop a Lightbox almost anywhere. In this example we have a columns element. That row contains three columns. Each of the first two columns has its own Lightbox inside, and what we'll do now is add one to the third column:

And when we add a new lightbox to our project, as we're doing right here from the Elements Panel, the thumbnail — that image element that sits inside the lightbox link — has a placeholder. And we can replace that with our own thumbnail for the media we're putting in the actual lightbox.

So, let's pick our thumbnail image. Now you can create a smaller thumbnail on your own, but keep in mind Webflow will automatically create smaller versions of this image and load up the best size for the user.

And once you've set the thumbnail, you're all done. You can do to this thumbnail... everything you can do to a normal image element. We can resize it. We can double click and replace it. We can go over to our Element Settings Panel and add an alt attribute.

That's setting thumbnails. Now let's set up our media.

The goal here is to select the image or the video that we want displayed when a user presses on our lightbox link.

And to do that, we can select any element inside our lightbox link — in this case we're selecting the thumbnail itself — and to choose our media, we'll go to the Element Settings Panel. We have our lightbox settings right here. Two options: image, or video.

Video lets us paste a link from a third-party site like YouTube or Vimeo, and Image lets us choose an image file. We can upload a new image, or in this case we already have the image in the Asset Manager. Simply select that image, and we're good to go.

For images, we have the option to add a caption here, let's type one in so we can see what it looks like. And once we've done that, we can go to Preview on the top of the Canvas, and hover over our thumbnail, and once we press it — when we press on the lightbox link — we see our lightbox media. Caption right there at the bottom.

That's setting up our media.

And finally, we have linking. This might be the greatest thing of all. If we have different lightbox links on the same page, we can link them together so they behave as a group. Like this. We can navigate by using the arrows on the side, and by using the thumbnails which are presented at the bottom.

And to do this, we can select anything in our lightbox link, go over to Element Settings, and at the bottom of Lightbox Settings, we check Link with other lightboxes.

Now wait a second. What if on our page, we have multiple groups of lightboxes we don't want in the same set? That's what the group name is for. We match the name for each lightbox we want in the group.

And when they match? When each of these has the same group name? We can see very clearly, that they now link together perfectly.

So, we've covered the anatomy of our lightbox link, which is a link block containing our thumbnail. And when pressed, that takes us to our media: we can use pictures or videos from an external site. And of course, we can link multiple lightboxes together.

That's a lightbox.