Links

CMS & Lightbox + Groups ❺

Display your nested Collection List Lightboxes in separate groups
Webflow's lightbox element is CMS compatible, however it has some limitations.
One limitation is that it does not provide the ability to bind the lightbox group. This means that if you are using the CMS multi-image field, and you are using a nested collection list to display them, you cannot lightbox-group these images together.

Use Cases

Common examples of where designers need this;
  • Product catalogs where you have multiple product shots
  • Real estate sites
  • Event sites
SA5 offers a no-code attributes-based solution to add this capability.

Demonstration

Usage Notes

SA5 will assigns lightbox groups regionally in your element hierarchy.
Place the attribute on any element, and all of the lightboxes that are descendants of that element will be assigned the same lightbox group.
This may not be necessary for the library to work, but it's best to enable the Link with other lightboxes feature on each of your lightboxes. Leave the Group name blank.

Add the wfu-lightbox-group attribute

Add the wfu-lightbox-group custom attribute with the group name you want to any parent element of the lightbox, and all subordinate lightboxes ( descendants of that element ) will be assigned that same lightbox group.
What value should I assign to the attributes?
You can assign any unique value you choose for your group.
To create separate groups for each of your parent list items, use Webflow's CMS-bound custom-attribute feature and set it to the parent item's slug. This ensures that each group has a unique name.
If you have other lightboxes on your page outside of the collection lists, make certain their group names (if any) do not conflict with your CMS item slugs. An easy way to do this is to prefix them with a hyphen or underscore.
Where should I place the attribute?
For this nested list scenario, there are two common strategies.
Collection lists individually have a 3-level hierarchy of Collection List Wrapper, Collection List, and Collection Item, which we'll refer to here as wrapper, list, and item.
In a nested list arrangement, they'll appear like this;
Example of a nested list, in which the parent contains a lightbox image, and the child Multi-image
In this example, the parent collection list has a main image which is light-boxed, and it has a nested collection list - bound to a multi-image field - whose images are also light-boxed.
Here you typically choose one of two configuration options;
  1. 1.
    If you want all of the images including the main image to be grouped together in the same lightbox, then place the attribute on the parent's item element.
  2. 2.
    If you want the child thumbnails to appear in the same lightbox, but exclude the parent's image, then place the attribute on the child's wrapper element.
Remember to bind your custom attribute value to the parent item's slug, so that they all get the same unique group name.
Avoid placing the attribute on two elements that have a parent-child relationship to one another, as this will create an undefined situation as to which group will be applied.

Getting Started ( NOCODE )

STEP 1 - Add the Library

First, add the library as detailed in Quick Start.

STEP 2 - Apply the custom attributes to the elements you want to affect

See above for details.

Credits

Full credit to Travis Orams for detailing the original solution approach. SA5 uses a similar group-setting approach, without the need to replace the lightbox element manually.
Last modified 4mo ago