Lightbox Group is showing all images for all CMS items

Design help CMS
1

See links below.

On my site, a user can click a card to go to that card’s page.

Clicking the card Echolocation will go to the Echolocation Card page. On the bottom of the card’s art there is a button to view alternative art, which opens a lightbox modal. The button itself is a lightbox link, and all of the images that show in the lightbox are connected via lightbox grouping (each image is a different field within the Card CMS object). This is working properly as expected.

image
image1920×939 115 KB

image
image1920×1084 119 KB

I’ve been tasked with replicating that functionality on the homepage, such that each card with alternate art will display a button that, when clicked, will open the same lightbox view as is viewable on an individual card’s page.

I’ve implemented a button with a palette icon to serve this function, and it properly appears on cards with alternate art.

image
image1920×657 154 KB

However, upon clicking the button, the resulting lightbox modal shows ALL alternate arts for all cards that have loaded on the homepage. This is incorrect–the desired behavior is to have ONLY the alternate art for an individual card show when user clicks the alt art button for that card.

image
image1920×1058 179 KB

I assume this is due to how lightbox groups work. AFAIK each alternate art that exists across cards is being grouped together, but I don’t see a way to have a lightbox group that functions within a single collection item (card), or that can be generated dynamically based on a particular collection item (card).

I tested out using a multi-image field, uploading each alternate art file in the multi-image field, referencing it within a new collection list inside the card item, and adding a lightbox to it, but it seemed to have the same problem w/ lightbox grouping (and made a button appear for each alt art, rather than the desired single button to open the lightbox modal).

I’d appreciate any insight or potential fixes.

Thanks!

Read-Only link: Webflow - DOOMLINGS Compendium

Published Link: https://doomlings-compendium.webflow.io/

1 Like
2

If there is only one alternate art item, just remove the group setting so each lightbox is independent.

If there can be several alt arts for a single item, you can use SA5’s lightbox groups-

1 Like
3

Hi Michael, thanks for getting back to me.

The lightbox tools from SA5 look like just what I need, but I’ve had no success making it work.

I’ve tried the following:

  • Copying the library code to the homepage’s Head area
  • Copying the library code to the whole site’s Head area (tried each independently)
  • Adding the wfu-lightbox-group custom attribute (value = slug) to the appropriate collection item in an attempt to group multiple lightboxes (each linked to a different alt art slot for that item)
  • Removing a group name from all lightboxes
  • Adding a shared group to all lightboxes
  • Adding a manual, unique group name to all lightboxes
  • Adding the wfu-lightbox-group custom attribute (value = slug) to the appropriate collection list in an attempt to group one main lightbox with a lightbox linked to a multi-image field (tried this independently of previous custom attribute above)

None of these methods yielded different results than what I tried before.
Maybe I didn’t copy the code over properly? Or some other custom code is interfering?

As a reminder, my goal is to provide a single clickable element per card that have one or more alt arts which, when clicked, opens a lightbox of that card’s main image AND all other alt arts for that card and NOT alt arts for any other card.

Thanks again for your help.

1 Like
4

@memetican see my reply above.

For context, my published site is attempting to link multiple lightboxes, most of which have display set to None.

I was also testing out using a multi-image field by adding an additional collection list inside the card element (Collection List Wrapper 3), but I currently have that set to display None while I work on testing the former method. I found that using the multi-image field, I would get an individual lightbox element for each of a card’s alt art provided in the multi-image field (often 2 or more), rather than the single clickable element I’m after. And even then, it still wasn’t linking together a card’s main art and all alt arts.

I can re-enable this and demonstrate using Echolocation (the first card that appears by default) if requested.

5

Did you get this solved? I’ve been trying to figure this out for months. I tried the above solution and I’m also not seeing any new custom classes. I tried putting the library custom code on the entire site settings header as well as a specific page’s header. Alas, no luck.

6

Hi Alex, I didn’t see your message while I was traveling.

As far as I’m aware Webflow hasn’t changed anything that would impact SA5 libs, you can check the demo & cloneable here to see the exact setup-

https://cms-lightbox-groups.webflow.io/

One important thing I’ll note is that if you have stylistically hidden lightboxes in your page ( display: none ), the lightboxes will still be there and SA5 will still process them for grouping. This may be creating conflicts in your design.

If you’re hiding the lightboxes intentionally, you can use the Settings visibility: hidden option instead to remove them from the generated HTML.

What I’d recommend that you do is make a clean page that has a minimal setup for you groups test, so you can see it work.

7

Hi Abby, I’m not sure what you mean by custom classes?
The lighbox grouping mechanic is handled in Webflow’s lightbox JSON, part of its internals.

Check my message above and the cloneables to see how to setup the library correctly.

8

Screenshot 2024-03-31 at 9.57.30 PM
Screenshot 2024-03-31 at 9.57.30 PM1702×334 25.3 KB

I meant custom attribute, as mentioned in the previous link you shared. I will check out your new response and see if that helps!

9

Alex’s setup seems to be a little different than mine. I’ll go ahead and add my share link too in case you’re interested in taking a look.

https://preview.webflow.com/preview/abbyblue?utm_medium=preview_link&utm_source=designer&utm_content=abbyblue&preview=4286ef96af18c90ea154e569d3ae29db&pageId=659d7fb213de4b77b1cfaac6&workflow=preview

10

I’m seeing that I have to separate the lightbox groups with their own attribute names, although I’m unable to link to the image media. I see all options from product description to button, but I don’t have to option to link to the images that are in my CMS. This is where I’m running into a wall

11

1 Like
12

Thank you so much for recording this, Michael! I’ll give this a go tomorrow. The reason I had added all that media manually was actually because I was following a Webflow tutorial which guided me to do it this way. It did seem weird to me today as I was looking over it again after taking a month break from it. Will update how it goes after I’ve removed the media and try binding them as you suggested, then adding a custom attribute to each lightbox. In this instance, should there should be as many lightboxes as there are products, or will there still only be one but with different group names under the custom attributes? Thanks again for your help!

13

Check the SA5 docs. In a nested list configuration, the attribute for grouping generally won’t go on the lightbox element, because it’s inside of a nested list and there you don’t have access to the outer list’s fields like the slug.

SA5 lets you put it on any containing element of the lightbox, the docs and cloneable demonstrate this.

14

Hi @memetican ,

Thanks again for your help in this. I tried the solution you suggested–switching from Display:None to Visibility:Hidden for my lightboxes beyond the first (which acts as a button to view the lightbox images).

I found that this did not resolve the issue–clicking the lightbox would only show a single alternate art for a card, rather than each of that card’s alt arts. Additionally, this broke the established functionality on the individual card’s page–the “Super Secret Alternate Art” button was only revealing the first alt art, rather than all alt arts.

I reverted to using Disaply:None, which restored functionality to the alt art button on the card page, but still I don’t have proper functionality for the button on the homepage.

As far as I can tell, it’s working properly on the card page because each of the lightbox elements is using the same manually-created lightbox group (called Card Art).
This leads me to believe there’s either some issue with how I implemented the custom attribute for the homepage button (I ensured it derived from slug and put it on Collection Item 5, i.e. the item for each individual card), OR an issue with how I implemented the Head code, OR an issue with the code or attribute itself.

To reiterate, my goal is to get the same functionality that occurs when clicking the Super Secret Alternate Art button on a card’s page to occur when clicking the paint brush icon on a card on the homepage. You can see an example on the Echolocation card page by clicking Echolocation.

15

I think you might have misunderstood something- using the visibility hidden setting will effectively remove the element from the page, but not the designer. Great for testing, temporarily offline features, among other things.

If you’re trying to do CMS driven lightbox groups, the SA5 docs and cloneable are all you need. Review those, learn how it works, and then it’s easy to implement in your setup.

Your page seems over-complex, so start simple. Clone it, build it as a single set of lightboxes in one collection list and then expand from there. That’s how you’ll discover whatever is tripping you up.

16

Hey @memetican , thanks again for your help. I was able to get the correct image to come up when clicked, but now they are not connected to the other product photos of the same product in anyway. I believe this is where I would work with the custom attributes but the binding options under Value only give text options (product title, description, etc). How can I correctly group each product’s lightbox gallery together so when either the main image or a multi image is clicked, that group pops up and the user can scroll through with their arrow keys?

Here’s my new read-only link, thank you!!
https://preview.webflow.com/preview/abbyblue?utm_medium=preview_link&utm_source=designer&utm_content=abbyblue&preview=4286ef96af18c90ea154e569d3ae29db&pageId=659d7fb213de4b77b1cfaac6&workflow=preview

17

Hi Abby,

I’ve added some notes and a video to the documentation to help you see how the configuration for this library works in the cloneable.

18

Thanks for that helpful video. My issue is that I do not have the option to bind my custom attribute to any Slug. I went into my CMS product template to see if there’s an option to add a Slug, which there is not. I’m still not sure how you’re binding your attribute to the parent slug.

Screenshot 2024-05-17 at 5.43.05 PM
Screenshot 2024-05-17 at 5.43.05 PM408×626 88.7 KB

19

Hmm, thanks Abby.
Here is Product Catalogues the ECommerce catalog?

ECommerce collections have always behaved just a bit differently from regular CMS collections, so you may be hitting a limitation there.

If so, I have an approach I’ve been thinking about that could resolve this limitation. Just to check, if you drop an HTML Embed inside of your collection list item, and click + Add field, are you able to select the slug there?

20

Also, although I have not tried it, it’s likely you can use any unique field as the group name. If the Product Titles are unique, try using that instead.

In the custom attribute, you’d have the Name as wfu-lightbox-group, and then the value would be bound to the Product Title.