Streaming live at 10am (PST)

Lightbox CMS Gallery is not playing well with pagination (help!)

Hello Webflow community,

I have utilized a few tricks… one by @oramsdesign to get a lightbox function out of a CMS gallery, as well as a tutorial by @PixelGeek to enable seamless pagination.

Here are the two resources I used:


I’m hitting a wall… when I click “next” to view more of the gallery, the lightbox stops working. It only works on the first page, and that lightbox only includes the gallery items from the first page.

Is there a workaround that any of you Webflow wizards can think of? Or will these tricks only work independently?

Here is my read-only link

And here is a live preview (since the lightbox workaround doesn’t preview until published)

Gallery is at the bottom of the page.

Thank you!

Hey @mtchdrr

Great news!!! Lightbox CMS is now functional in Webflow… here’s how to add a fully functional gallery connected to your CMS in less than 90 seconds… :smiley:

CloudApp

Oh and pagination is functional in Webflow too, so you shouldn’t need any workarounds at all.

Thank you for your reply and video! Can’t believe I wasted time on getting the lightbox to work when it was so simple all along…

I’ve got it set up correctly now, but, the pagination STILL breaks the lightbox. Revisit the live site and see what I mean. When you load the page initially, the first few items in the gallery work together in a lightbox. However, if you click “next” at the bottom, the second page doesn’t open in a lightbox at all. If you refresh the page, and it reloads on the second page, they work again.

Something about transitioning through the paginated pages breaks the lightbox.

I think it was bad timing, we only just announce the lightbox CMS thing yesterday. I’ve created SO many of those custom ones over the years, I"m so glad I never have to do it again! :smiley:

I’ve literally this minute just opened up a conversation with a colleague about this. It seems it is a bug when combining pagination and the lightbox, but I’ll keep digging tomorrow.

I’ll write an issue for this and will keep you posted. If I find a workaround in the meantime I’ll also let you know. :: :bowing_man:

@mtchdrr Can you make sure to delete the code and try on the published site?

It’s not working for me in preview mode, but I have it working on the live site…

Really? Are you sure its working on successive pages of the pagination gallery? Mine works on whatever “page” is active when I load the site, but no longer works once you hit “next” or “previous”

Not doubting you, but I just can’t get the same result.

Thank you for your attention to this issue, I really appreciate it.

Hey @magicmark its been awhile… but I’m needing this solution again for another client. Now thats its been awhile since this feature released, have you had any breakthroughs with this bug? Same exact problem as I describe above.

When you load the page initially, the first few items in the gallery work together in a lightbox. However, if you click “next” at the bottom, the second “page” of images are in a separate lightbox. I’d like the user to be able to scroll through all the photos in one lightbox.

Hi @mtchdrr, why are you using Pagination?

Why not use the CMS-Gallery feature. This should eliminate the need for Pagination.

Add new share link of issue?

Happy Designing,
Brandon

I am using a CMS gallery, but I still want it to be paginated (lots of photos). The problem is that it only shows one “page,” or set, of images in the lightbox. Then if I click “next” and select a photo from that new set, it only shows the other photos in that set/page within the lightbox. All of the photos in the gallery should be in one lightbox, but still work with pagination.

@mtchdrr, I believe your issue here lies within the limit of each CMS Gallery. The limit is 25 images. Therefore even with the selected gallery names, you will be limited to the total number of 25. I could be wrong tho. I have not had the opportunity to test it out fully myself.

Please send me your current share link so I can see first hand the issue you are having.

Happy Designing,
Brandon