How to add multiple images behind a single Lightbox link?

Design help General
1

Is this possible?

I would like to have one simple images icon that opens a Lightbox gallery with multiple images.
Like this but a bit smaller))

images button

-Seppo

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

One solution, I believe, would be to insert all of the images into your page as normal, and ensure that they all (including your images icon) are in the same group. You could then set the rest of the images to hidden, leaving only your icon visible for users to click on.

I’ve just tested this in one of my sites and it works. I would imagine that there’s cleaner solutions out there though, that’s just from the top of my head :slight_smile:

3

Look again in the settings tab, you can have multiple thumbnails that are targeting the same Lightbox, so when you click any of them, the lightbox opens with all the images ready to be browsed.

4

Thank you for this idea!
It seems like there should be a simpler way as you mentioned.

5

But my idea was to use only one thumbnail to access all the images in the Lightbox. Perhaps I’m not getting something here…

6

I made a quick demo site using the example I gave. It took me about 5 minutes so it’s not too much of a time drain.

https://preview.webflow.com/preview/lightbox-tester?utm_medium=preview_link&utm_source=designer&utm_content=lightbox-tester&preview=bc7500e2ed3e2b49096a2b531e3d4c8d&mode=preview

And here’s the live link: https://lightbox-tester.webflow.io/

Hope it helps!

7

Lightbox is just a behavior for viewing an image. Click an image, not necessarily as small as a thumbnail, and it opens in a lightbox. that lightbox can become a gallery view when multiple images are linked, but it’s never a “gallery” to begin with. So what you’re confused about is this: this is a lightbox feature, not a gallery feature.

9

Thank you for clearing that up for me.

If you don’t mind me asking:

Do you see a “cleaner” way of making a gallery that would act like a light box with multiple images other than what Andy_Vaughan suggested?

What if I need to have 30 images in the same group but just one thumbnail. Keep all of the other links hidden?

10

Not really. Images galleries look simple but they are always complex. Often, when you want a really features stuffed image gallery, you embed a gallery from a proper image service.

Place a div just below the image that will be the main image. Place all the other thumbs in it. And hide this div with display:none.

11

Thank you vincent and Andy-Vaughan!

I really appreciate your advice.

2 Likes
12

Hey @Seppo_Riiho,

Glad I (we) could help! I probably need to clear some project space tomorrow by deleting a couple (I’m still too cheap to buy the Pro plan!) - would you like me to send you this project that I linked above if you still need to refer to it?

13

Actually I got it figured out already with the advice you guys gave me. So go ahead and make space for new creative adventures!

Cheers!

Here’s what I did:
www.namoi.design/english

1 Like
14

Awesome, glad you managed to sort it out! :slight_smile: