Anyone know how to show all images in a lightbox from limited on page images?

Hey everyone, I’m working on an apartment listing page, and I’m trying to show more images in a gallery like airbnb.

In the top section of the page, I’m showing 5 thumbnails, successfully linked to a CMS lightbox, however, I only want to preview 5 thumbnails on the page—but when you click a thumbnail to popup the lightbox, I want all remaining images (regardless of the number) to be shown/linked.

To limit the thumbnails on the page, I’ve limited the shown CMS items, but that also limits the items shown in the lightbox.

Does anyone know how to achieve this condition?

I’ve thought about ways to separate image into separate CMS fields, and then linking both lightboxes, but this creates additional backend work for the client, to upload images into different fields.

Thanks for any help!!

Here is my site Read-Only: LINK

1 Like

I’m trying to do this exact thing! Would love to know if you found a solution or if @WebflowCommunityTeam could chime in!

So I created a wrapper for the thumbnails and set the overflow to not-visible which works as a workaround. Would love to know if there is a better way to build this!

Hey @StephGreen, are your thumbnails in a CMS list? It sounds like your workaround is a good simple solution. If your overflow wrapper is set to hidden, does that mean you also gave it a set pixel height?

Can you share a read only link?

The way I’m doing it now is separating the images into 2 CMS image fields; one called featured images, and another called additional images, and then I just link the two lightboxes together. You can see it in my original read only link. (I’m also experimenting with your method as I write this).

@drungsea I’m quickly runing out of CMS fields so I’m thinking how I have it set up will have to work. Yes, I set the wrapper with a fixed pixel hight and it seems to do the job.

Read Only Link:

Got it, thanks for sharing. I took a look and saw something you may want to revisit, according to your solution. Since you specified pixel heights for your collection item containing the lightbox thumbnails, the thumbnails get distorted when you resize the browser window.

So if you think about your responsive design, users on different devices will see either stretched or narrowly squeezed images, which isn’t the most ideal, visually speaking.

Anyway, hope I contributed something you may not have be aware of!