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!

1 Like

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

Hey I realize this thread is pretty old, but I never solved this. Has any new information come to light? Current share link here:
https://preview.webflow.com/preview/bourbon-bowties?utm_medium=preview_link&utm_source=dashboard&utm_content=bourbon-bowties&preview=35b845250a68dd62c8fd4b90665899a4&mode=preview

EDIT: the gallery is now on its own page. https://bourbon-bowties.webflow.io/gallery

Hi @mtchdrr,

The way you have your gallery setup, the current way, will be limited to the gallery view per page, since pagination is setup with a per page layout. SO you have your images limited to 24 per page.

If you truly want a paginated gallery that would have continuous lightbox image effect, you will have to place your Images in the Image-Gallery field, within a single collection item and then place them on the Gallery template page, as the multi-image gallery field is only visible on Template pages at the moment.

Best Regards,
~ Brandon

I see. The multi-image field says it only supports 25 images, but I need to display 65 or so. Is there no large gallery option that supports pagination?

@mtchdrr,

You can have more than one MIF in a collection. If you ar eon the Business Plan you can have a total of 1500 images if you add only MIF to the collection.

Best Regards,
~ Brandon

Hi @QA_Brandon and @mtchdrr I’m with the same problem. Is there any solution?

I’m using a CMS Gallery with a lightbox.

My site: https://suzano-contra-o-coronavirus.webflow.io/

1 Like

Hi @jefersonpsousa,

The 25 image limit is all we have right now. As this only works with the Lightbox element, the pagination effect that Mitch was speaking about could only be done with custom code as the CMS Slider is still not available.

Best Regards,
~ Brandon

How can I get this to work for pagination/lightbox video in a CMS?

I’m experiencing the same problem! Did anyone ever find a solution to this?

Negative. I had to lower my expectations and live with the limitations. My lightbox only shows the images on that individual paginated “page” of my gallery. This could probably be worked around using Finsweet Attributes, but I don’t know for sure.