Is there *ANY* way to dynamically set a Lightbox "Group name"?

My use case is pretty basic… a few hotel listings with images I want arranged coming from a Multi-image field on a page. So far, seems fine. BUT, I would like EACH LISTING to have it’s own Lightbox group name, so when a customer selects an image, they see a Lightbox that ONLY shows that hotel’s images. Currently, due to group name seemingly being for the whole page, it shows EVERY image. Sadly, at no level, is there also any conditional visibility. Why not? Who knows.

Obviously, if they would have just made “Group name” also able to pull a field (i.e hotel name, in this particular case)… this would work flawlessly and without a single bit of code. Guessing, sadly, that’s not possible and I need some kind of custom code? But, where, and how? Is it even possible?

As a possible “no code” or “less code” alternative… is it easier or better to attempt to use a full screen slider that appears on any image press per hotel? Haven’t tried yet, but near wits end (as usual). Wondering if that might be “good enough” and far less of a headache.

Share link to one collection below - visually a mess, but no sense cleaning up until I can figure this out. ALSO, I’m still fiddling around, so… it might be more “broken” by the time you try it. It’s a collection page, and oddly/sadly you can’t seem to have more than one version of one (bad for testing). Cheers!


EDIT: Removed share link, as I don’t have time to screw around with this… just going to attempt to use a good old slider. Fingers crossed! But, would still kill to know if the above ve is possible.

EDIT 2: Are you kidding? I can’t even hook up a slider to a Multi-image field? What could be so obvious? Seriously, I will be looking for another platform after this. May not find one, but it’s mind boggling just how useless things seem to be. PLEASE, correct me if I am wrong. I WANT to be wrong.

I faced the same problem as you with the build-in component.
However, I have a solution that using the Fancybox library with some custom code.

This custom code is there to create a group name dynamically.

$('.multi__wrapper').each((i,el)=>{
    $(el).find('[data-fancybox]').attr('data-fancybox',`group${i}`)
})

Demo
Read only

2 Likes

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.