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.

Lightbox for images and videos – Web design tutorial
Tagged on:                                     

6 thoughts on “Lightbox for images and videos – Web design tutorial

  • August 19, 2017 at 3:31 am

    Can you change the caption's font family and font size?

  • February 24, 2018 at 10:53 pm

    Wow thank you!

  • April 28, 2018 at 12:25 am

    Perfect! <3

  • January 7, 2019 at 2:57 am

    Is it possible to have a gallery of sorts within a lightbox image? For example, say I have a photo of a ring as my thumbnail, and I want the user to be able to click on it and have lightbox pop up with multiple views of that ring. Is this possible?

  • July 11, 2019 at 9:20 am

    LOVE Webflow! Thank u! =)

  • October 17, 2019 at 4:29 pm

    Thanks for the vid ! I have a problem tho šŸ™

    I'm using a grid with 20 pictures with numbers from 1 to 20 in it. I put 20 lightbox, one in each box. I linked them all but there is a problem. I can click on any of the image, doesn't matter if it's the first or the 15th, it will always open the linked lightbox with the preestablished order. (Not like in your video)

    (Sorry for my english) Is there a way to just link all the pictures to one lightbox but if i click on the picture number 13, it will open the lightbox on the number 13 picture and not the first one ?


Leave a Reply

Your email address will not be published. Required fields are marked *