Hello,
I’ve been trying to get the legendary @memetican Sygnal’s CMS Lightbox groups working but I can’t get it figured.
I’ve gone over all the steps multiple times but can’t get it figured out.
I’m on the Facilities Page working on the Lightbox under the Accommodations section
Please send help!
Here is my public share link: LINK
(how to access public share link)
Hi Sammy,
Very creative design! It looks like SA5 is grouping the lightboxes smoothly, but that the lightbox itself is struggling in the current page arrangement - i.e. lightbox within tabs, within a popup, within a collection list.
Here’s what I’m seeing, I’m curious if you’re seeing it break in a different way ( I’m on chrome )
You are fantastic!!! Thank you ever so much for your thoughtful reply. I’ll Buy you a Beer for sure!
My biggest problem was that I had added the SA5 Attribute to the Facilities when I thought I added it to the Accommodations 
I absolutely hear what you’re saying about simplifying the design. Given the nature of their business model, they seem to be fully-booked more than a year out at a time, so SEO isn’t an immediate concern. I will consider a further build out, but part of me wants to figure it all out just to test my skills in a complex situation.
The site is functioning as intended, except for 1 catch. It is strictly the Gladstone Lodge lightbox that isn’t working. The rest will function as intended, every time.
I’m deeply curious at this point as to why that would be… Do you have any inkling? Either way, you have done more than enough for me! You’re a community hero. Thank you for everything you do!
Hmmm I see what you mean. There is a console message when you invoke that first lightbox;
facilties:1 Blocked aria-hidden on an element because its descendant retained focus. The focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at Accessible Rich Internet Applications (WAI-ARIA) 1.3 .
Element with focus: <a.w-inline-block w-lightbox active-lightbox>
Ancestor with aria-hidden: <div.page-wrapper> <div class="page-wrapper" aria-hidden="true" tabindex="-1">…
I’d be curious too, I think- clone the page, and start unpacking it one layer at a time. First remove the SA5 lib, publish and test. Then pull the lightboxes outside of the tabs, publish and test. Then pull them out of the FS modal, publish and test.
My guess is that the problem lies somewhere between FS modal and the lightbox. If you pin it down there, Finsweet might have some guidance, their forums are great.
You could also try SA5’s modal instead to see if it somehow works differently in this case, it’s GSAP-based.
Webflow Popups & Modals | SA5 | Sygnal Attributes | Designed for Webflow
In fact I’m redesigning it soon, it would be interesting to test that here also.
Let me know what you find out!
Will do my friend!
I’ll be in touch