CMS Image Selections Not Reflected in Lightbox

Hello,

Please find links below to take a look. I have a CMS collection of photos where user can select different categories using checkboxes. The category filters work fine but when clicking the photo to go to Lightbox the Lightbox still displays ALL the photos on page not just the filtered selection. Have built this a few different times and get the same results. Not sure what am doing incorrectly. Any advice or instruction would be most appreciated. Thanks!

Photo gallery page in question:

Share link to site draft:
https://preview.webflow.com/preview/relume-library-3963fb?utm_medium=preview_link&utm_source=dashboard&utm_content=relume-library-3963fb&preview=c4d2d9724970073c3f44c440260e2e3c&workflow=preview

image
Remove the group name in the Lightbox Link settings and they won’t link to each other.

Thanks. This removes the thumbnail strip and ability to click next / previous when in Lightbox view. Still want the light boxes to be linked, just only for the images displayed based on the filters selected. Make sense?

1 Like

Oh I see, I’m not sure if there’s a way to do that natively with the lightbox element. I think the closest you could get is to label the lightboxes with group names that match their categories, but they would still only share lightboxes with their group and not of multiple groups if the user had multiple checkboxes selected.

I also can’t find a solution to this and really wish I could!

A dynamically filtered lightbox group? :thinking:

I’ve built CMS-driven groupings so in theory this should be possible, but you’ll need some code hooks into your filtering UX. If you’re using Finsweet’s, check their API, it may have an event on a filter change.

Your basic task would be-

  • Detect a filter change
  • Determine the list of lightboxed items
  • Set them all to an arbitrary group, can be random
  • You may need to re-init Lightboxes to have it re-gen its JSON

Not particularly complex code, but it may be tricky to hook it in elegantly.