Dynamic Group Name for Lightboxes

Design help Custom code
1

Hey everyone.

I have a bunch of events in a CMS collection, each with a multi-image field. I want to have a light box for each event that shows only that event’s multi-image content.

Since the events and multi-images are in a collection, when I link the light boxes, each event’s light box shows all of the event images. Is there a way to dynamically set the group name of the light box per event so I can limit the images shown for each event to only that events multi-image content?

1 Like
2

Created a solution using custom code:

Have a collection of events, each of which has a multi image field of images from the event. I have

- Events Collection
- - Event Images Collection
- - - Event Images Lightbox (linked to "tempGroup")
- - Events Lightbox (linked to "tempGroup")
- - HTML Embed

The general concept is:
1.) Identify places where “tempGroup” occurs in HTML (in our case there are two places, one for the outer, events Lightbox and one for the event images lightbox)
2.) Rewrite the group value in these places dynamically using values from the collection and simple DOM stuff, ensuring the proper group names sync up on both lightboxes for each event

Everything is working as expected which is nice. I feel like the group name could be set dynamically from the UI to easily expand the lightbox linking capability. Think this could be really powerful for product/event showcasing and a ton of other use cases. Would be happy to help contribute.

If you implement this method, as always, be careful about the position of the custom code you implement as you want to be sure the content is loaded before you reference it, either by using a content loaded listener or by placing the html code after the actual elements are created in Webflow.

3

Hi Ian, I’m super glad I found this thread since I have the exact same problem. Can you share how you implemented this with custom code? That would be super helpful. Kind regards

4

Hi Ian,

Just stumbled upon this - I know it’s a while ago but I’m facing the same problem and wondered if you’d be willing to share the script and a few more details of how you resolved it.

Thank you!