SA5 | Sygnal Attributes | Designed for Webflow
Buy Us a Beer!Community ForumMicro-Consulting
  • โžก๏ธGithub Repo
  • ๐Ÿ‘ซSygnal Attributes Community
  • ๐Ÿ“˜Overview
    • Sygnal Attributes v5
    • How to Add Custom Code
    • What is Sygnal Attributes?
    • Sponsor a Feature โœจ
    • What's New?
    • Library Modules
    • Technical Notes & Goals
      • CSS Media Queries
      • Callback Handlers
      • Custom Attributes
    • Documentation
    • Configuration Blocks
      • Configuration Block Specification
    • Preloaders
    • Breakpoints
    • Component Support ๐Ÿงช
    • Sygnal Attributes ( SA5 ) Support
    • Dev Team Notes
    • GDPR
    • SA6
    • Triggers, Events & Actions
      • Triggers
        • Click Triggers
        • Scroll Into View Trigger
        • Hover Trigger
        • Timer Trigger
        • Form Triggers ๐Ÿงช
          • Form Submit Trigger ๐Ÿงช
        • Exit Intent Trigger ๐Ÿงช
        • ECommerce Triggers ๐Ÿงช
        • Inactivity Trigger ๐Ÿงช
        • Page Load Trigger ๐Ÿงช
        • Url Hash Trigger ๐Ÿงช
        • Gated Trigger ๐Ÿงช
        • Link Triggers ๐Ÿงช
        • Reactiv Triggers ๐Ÿงช
        • Interaction Trigger ๐Ÿงช
      • Events
        • Namespacing
        • Event Data
        • Link-Based Triggers ๐Ÿงช
        • Breakpoints ๐Ÿงช
        • Persistent Events ๐Ÿงช
        • Gated Events ๐Ÿงช
      • Actions
        • Click Actions
        • Alert Action
        • Visibility Actions
        • Scroll Into View Action
        • Video Actions ๐Ÿงช
        • Audio Action ๐Ÿงช
        • Class Adder Actions ๐Ÿงช
        • Tab Element Actions ๐Ÿงช
        • Interaction Actions ๐Ÿงช
        • Form Actions ๐Ÿงช
        • Navigate Actions ๐Ÿงช
        • Script Actions ๐Ÿงช
    • SA5 Core
      • Handlers
      • Controllers
      • Core Processing
      • Core Technical Notes
        • Element Tracking
  • ๐Ÿ“˜sa5-cache
    • ๐Ÿ”About SA5's Cache Lib
    • Data Caching โบ
      • Cache Setup v4
  • ๐Ÿ“˜sa5-socialshare
    • ๐Ÿ”About SA5's Social Share Lib
    • ๐Ÿš€Quick Start | SA5 Social Share
    • Email Social Share โบ
  • ๐Ÿ“˜sa5-detect ๐Ÿงช
    • ๐Ÿ”About SA5's Detect Lib
    • ๐Ÿš€Quick Start | SA5 Detect
    • Page
    • User Agent Detection
    • Geolocation Detection ๐Ÿงช
      • Cache Setup v4
    • Detect Incognito Mode
  • ๐Ÿ“˜sa5-analytics
    • ๐Ÿ”About SA5's Analytics Lib
    • ๐Ÿš€Quick Start | SA5 Analytics
    • A/B and Multivariate Testing
    • UTM Tracking
    • Rel Attributes
    • GA Events
    • GTM Events โบ๐Ÿงช
      • Important dataLayer Notes
      • Facebook
      • Google Analytics ( GA4 )
      • Future
  • ๐Ÿ“˜sa5-data
    • ๐Ÿ”About SA5's Data Lib
    • ๐Ÿš€Quick Start | SA5 Data & Data-Binding
    • Usage Notes
    • Concepts & Terminology
      • Data Paths
      • Complex Data Sources
      • Developing Concepts ๐Ÿ“
    • Data Sources ( Simple )
      • URL Querystring Data Source
      • URL Part Data Source
      • User Info Data Source
      • Cookies & Web Storage Data Sources ๐Ÿ“
      • Global Data Source ๐Ÿงช
    • Data Sources ( Complex )
      • RichText Data Source ๐Ÿงช
      • Defining Custom Data Sources
      • Collection List Data Source ๐Ÿ“
        • Developing Concepts | Collection List Data Sources
    • Data Binding
      • Conditional Visibility
      • Form Elements ๐Ÿ“
      • Templates & Macro Expansion ๐Ÿ“
      • Developing Concepts on Data-Binding ๐Ÿ“
      • Macro Expansion
        • Macro Expansion
        • Count Items
      • Preloaders
    • SA5 Data ( HSON ) โบ๐Ÿงช
      • SA5 Data BETA Kit
      • JSON Data Variants
    • Advanced Use
    • SA5 Data JS API
    • Future ๐Ÿ“
      • External Data
      • One-Way v. 2-way Bindings
      • Reactive Bindings
      • Data Sources ( External ) ๐Ÿงช
        • Google Sheets Data Source โ›”
        • GitHub Data Data Source โ›”
  • ๐Ÿ“˜sa5-forms
    • ๐Ÿ”About SA5's Forms Lib
      • SA5 Forms Roadmap
    • ๐Ÿš€Quick Start | SA5 Forms
      • SA5 Forms Future
    • Data-binding Form INPUTs & SELECTs โบ
    • Smart Form Webhook Handler โบ
      • Form Webhook Handler JS API Events
      • n8n Handler
      • โ–ถ๏ธBasin Handler
        • File Uploads
        • Future
      • โ–ถ๏ธMake ( Integromat ) Handler
      • Future
    • Form Data Validation
      • Invalid Field Indicators (Real-Time) ๐Ÿงช
      • Invalid Field Indicators on Submit Attempt ๐Ÿงช
      • Email validation
    • Remove Unchecked Checkboxes โœจ
    • Preserve Line Breaks
    • Form IP Info โบ
    • File Uploads ๐Ÿ“
    • Custom Form Submit Button
    • File Downloads
    • Form Select Element
    • SA5 Forms API
    • Dynamic Forms
    • Form Success Redirect ๐Ÿงช
    • Show / Hide Password ๐Ÿงช
  • ๐Ÿ“˜sa5-html
    • ๐Ÿ”About SA5's HTML Lib
      • Webflow Interactions
    • ๐Ÿš€Quick Start | SA5 HTML
    • Advanced Element Sorting โบ
    • Advanced Element Filtering โบ
      • Useful Filtering Examples
    • Dynamic URLs ๐Ÿงช
      • Future
    • Dynamic Attributes
      • Future
        • Smart Attributes ๐Ÿงช
        • Prefix, Postfix, and Formatted Attributes ๐Ÿงช
    • Scroll to Section
    • Breakpoints โบ
    • Limit Items by Breakpoint โบ
      • Designer CSS Embed
    • Limit Items to Multiple-of โบ
    • Numeric Sequencing โบ
    • Truncate Text w/ Ellipsis โบ
    • Encoded Email
    • Hide Section w/ Empty Collection Lists โบ
    • Download File โบ
    • Decode HTML โบ
    • Markdown โบ
      • Themes
    • Transform โบ๐Ÿงช
    • Code Formatting โบ๐Ÿงช
    • CMS Code Injection โบ๐Ÿงช
    • Responsive Tables โบ๐Ÿงช
    • Text Formatting โบ๐Ÿงช
    • Components โบ๐Ÿงช
      • Component Object Positioning
    • Auto-Size IFRAMEs ๐Ÿงช
    • Switch Case โบ๐Ÿงช
    • Lazy Load
    • Gallery ๐Ÿงช
    • Scroll Anchor
  • ๐Ÿ“˜sa5-layout
    • ๐Ÿ”About SA5's Layout Lib
      • Future
    • ๐Ÿš€Quick Start | SA5 Layout Lib
    • Layout โบ
      • Tabs Layout Handler
      • Slider Layout Handler ๐Ÿงช
      • Future
    • Element Groups โบ๐Ÿงช
    • Equal Height Rows โบ๐Ÿงช
  • ๐Ÿ“˜sa5-logic ๐Ÿงช
    • ๐Ÿ”About SA5's Logic Lib
      • Future
    • ๐Ÿš€Quick Start | SA5 Logic Lib
    • If โบ๐Ÿงช
    • Switch โบ๐Ÿงช
  • ๐Ÿ“˜sa5-booking
    • ๐Ÿ”About SA5's Booking Lib
    • ๐Ÿš€Quick Start | SA5 Booking Lib
    • GetTimely โบ๐Ÿงช
    • SimplyBook โบ๐Ÿงช
  • ๐Ÿ“˜sa5-richtext
    • ๐Ÿ”About SA5's Rich Text Lib
      • Future
    • ๐Ÿš€Quick Start | SA5 Rich Text
    • Nested Lists โบ
      • Legacy Feature Notes
    • GitHub Gists โบ
      • โ–ถ๏ธVideo Tutorials
      • Why Gist?
      • Technical Notes
      • Future
    • Code Blocks ๐Ÿงช
      • Wrapping Code Blocks
      • Copy Code to Clipboard
    • Excalidraw ( SVG Embeds )
    • URL Expanders ๐Ÿงช
    • Annotations ๐Ÿงช
    • Text SPAN Formatting ๐Ÿงช
    • Lightboxes ๐Ÿงช
      • Future
    • Embeddables
    • Richtext โบ๐Ÿงช
      • CSS Isolation
    • Blockquotes
    • Call-Outs
    • Responsive Inline Images
  • ๐Ÿ“˜sa5-table
    • HTML Tables
  • ๐Ÿ“˜sa5-kiosk ๐Ÿงช
    • ๐Ÿ”About SA5's Kiosk Lib
    • ๐Ÿš€Quick Start | SA5 Kiosk
    • Usage Notes
    • Kiosk Hardware & Browser Setup
    • Kiosk Base ๐Ÿงช
    • Inactivity Timer
    • Display Mode
    • Technical Notes
    • Future
      • Smart Watch Notes
    • ToDo
  • ๐Ÿ“˜sa5-hotkeys
    • ๐Ÿ”About SA5's Hotkeys Lib
    • ๐Ÿš€Quick Start | SA5 Hotkeys
    • Hotkeys โบ
      • Future
  • ๐Ÿ“˜sa5-commerce
    • Payment Providers
    • Price in Local Currency ๐Ÿงช
  • ๐Ÿ“˜sa5-demo
    • Webflow Preview Link
  • ๐Ÿ“˜sa5-ui
    • ๐Ÿ”About SA5's UI Lib
    • ๐Ÿš€Quick Start | SA5 UI
    • 5-Star Ratings Component โบ
  • ๐Ÿ“˜sa5-cro
    • ๐Ÿ”About SA5's CRO Lib
    • ๐Ÿš€Quick Start | SA5 CRO
    • Conversion Tracking Event
  • ๐Ÿ“˜sa5-url
    • ๐Ÿ”About SA5's Url Lib
    • ๐Ÿš€Quick Start | SA5 Url
    • Query Param Passthrough
      • Future
    • External Link Targeting
    • Relative Link Fixups โ›”
  • ๐Ÿ“˜sa5-video
    • ๐Ÿ”About SA5's Webflow Video Lib
    • ๐Ÿš€Quick Start | SA5 Video
    • Background Video Poster
    • Triggers, Events & Actions
    • YouTube Hide Related Videos [BETA]
      • Styling Options
      • Future
    • Media Pop-Ups ๐Ÿงช
    • Video Player ( Direct )
    • Video Controller File Format
    • Media Controller
    • Video Player Controller
      • Video Playback Spec ๐Ÿงช
      • YouTube Video Data ๐Ÿงช
      • Loom Video Data ๐Ÿงช
  • ๐Ÿ“˜sa5-elements
    • ๐Ÿ”About SA5's Elements Lib
      • Elements Lib Future Plans
    • ๐Ÿš€Quick Start | SA5 Elements
    • Element Actions ๐Ÿงช
    • Tabs Element
      • Tabs Future Plans
      • Triggers, Events & Actions ๐Ÿงช
      • Tabs API
    • Slider Element
      • Triggers, Events & Actions ๐Ÿงช
      • Slider JS API
      • Slider JS API Events
      • Advanced Slider Use
      • Future
    • Deck Controller Element โ›”
    • Button Element
      • Triggers, Events & Actions ๐Ÿงช
    • Dropdown Element
      • Triggers, Events & Actions ๐Ÿงช
      • Future
    • Lightbox Element
      • CMS Lightbox + Groups
      • CMS Lightbox + Captions
        • Popular Lightbox Setups
      • Lightbox JS API
      • Triggers, Events & Actions ๐Ÿงช
      • SA5 Lightbox Future
    • Radio Button Element ๐Ÿงช
      • Triggers, Events & Actions ๐Ÿงช
    • Autocomplete Element
      • Styling
      • Future
    • Accordion Element
      • Accordion Future Plans
      • Triggers, Events & Actions ๐Ÿงช
      • Accordion API
    • Lottie Element โบ๐Ÿงช
      • Triggers, Events & Actions ๐Ÿงช
    • Locale Switcher Element โบ๐Ÿงช
      • Technical Notes
      • JavaScript API
  • ๐Ÿ“˜sa5-format
    • ๐Ÿ”About SA5's Format Lib
    • ๐Ÿš€Quick Start | SA5 Format
    • Format Numbers & Currencies โบ
    • Format Dates โบ
      • Use Cases
        • Custom Format a Date
        • Localize a Date
        • From and To Relative Timespans
        • Age
      • Future - Date formatting
      • Setup Your Date Field for Good Parsing
  • ๐Ÿ“˜sa5-user-accounts
    • ๐Ÿ”About SA5's Webflow User Accounts Lib
    • ๐Ÿš€Quick Start | SA5 User Accounts
    • Logged-In User Info โบ
      • Custom User Fields
      • Webflow's UserID
      • Access Groups
        • Using Access Groups for Conditional Visibility
        • Using Access Groups for Routing โบ๐Ÿงช
      • The User object
        • The User Object Lifecycle
      • Tips & Best Practices
      • User Info FAQs
      • Troubleshooting
      • โฉFuture Plans & Ideas
      • BETA testing
      • Technical Notes - Interfaces
      • Future Development
    • Advanced Log-In & Sign-Up Flow โบ
    • Conditional Element Display โบ
    • Expand Login Button โบ
  • ๐Ÿ“˜sa5-track
    • ๐Ÿ”About SA5's Tracking Lib
    • ๐Ÿš€Quick Start | SA5 Tracking
    • Webflow Cookies & Storage Tracking โบ
      • Conditional Element Visibility
      • Tracking Page Visits
      • Tracking Button Clicks
      • Track Query String Params
      • Track Checkbox State
      • Cloneable Demo
    • SA5 Referer Tracking โบ๐Ÿงช
    • Future Plans
      • Likes & Favorites Tracking โบ๐Ÿงช
      • Recently Viewed Tracking โบ๐Ÿงช
  • ๐Ÿ“˜sa5-modals
    • ๐Ÿ”About SA5's Webflow Modals & Popups Lib
    • ๐Ÿš€Quick Start | SA5 Modals & Popups
    • Webflow Popups & Modals
      • Triggers
      • Gating Modals
      • Modal Design & Styling Notes
      • Simple Modals v. Custom Modals
      • Modal JS API
      • Page-Specific Modal Control
      • Common Configurations
      • Pro-Tips
      • SA5 Modals Roadmap & Future
        • Future Attributes
        • Future Triggers
    • Dismissible Elements
    • Triggers, Events & Actions ๐Ÿงช
    • Webflow Modals & Popups Auto-Open and Auto-Close
    • Side Panels ๐Ÿงช
  • ๐Ÿ“˜sa5-selectcustom
    • ๐Ÿ”About SA5's Custom Form Select Lib
    • ๐Ÿš€Quick Start | SA5 Custom Form Select
    • Triggers, Events & Actions ๐Ÿงช
    • Custom Form Select โบ๐Ÿงช
  • ๐Ÿ“˜sa5-gallery
    • ๐Ÿ”About SA5's Gallery Lib
    • ๐Ÿš€Quick Start | SA5 Gallery
    • Gallery โบ๐Ÿงช
      • Simple Collage Layout Engine
  • ๐Ÿ“˜sa5-effects
    • ๐Ÿ”About SA5's Effects Lib
    • ๐Ÿš€Quick Start | SA5 Effects
    • Depthmap (Fake 3D) Image โบ๐Ÿงช
    • Image Zoom
  • ๐Ÿ“˜sa5-fixup
    • Viewport META
    • Webflow Fixups โบ
  • ๐Ÿ“˜sa5-countup
    • CountUp Animated Numbers
  • ๐Ÿ“˜sa5-seo
    • ๐Ÿ”About SA5's SEO Lib
    • ๐Ÿš€Quick Start | SA5 SEO
    • Noindex โบ๐Ÿงช
    • Nofollow โบ๐Ÿงช
    • JSON-LD โบ๐Ÿงช
      • JSON-LD Article โบ๐Ÿงช
      • JSON-LD Video โบ๐Ÿงช
      • JSON-LD Course Info โบ๐Ÿงช
      • JSON-LD WebPage
      • JSON-LD Sitelinks Searchbox โบ๐Ÿงช
  • ๐Ÿ“˜sa5-core
    • SA5 Core โบ
    • Webflow Designer Support โบ
  • ๐Ÿ“˜sa5-embeds
    • ๐Ÿ”About SA5's Embeds Lib
    • ๐Ÿš€Quick Start | SA5 Embeds
    • Table Embeds โบ
      • Google Doc Table Embeds
        • Styling Table Embeds
      • Google Sheets Table Embeds
      • Future
  • ๐Ÿ“˜sa5-state
    • ๐Ÿ”About SA5's State Lib
    • ๐Ÿš€Quick Start | SA5 State
    • State โบ๐Ÿงช
      • State Handlers
        • SA5 State Handler
        • MobX
        • Redux
  • ๐Ÿ“˜sa5-localization
    • ๐Ÿ”About SA5's Localization Lib
    • ๐Ÿš€Quick Start | SA5 Localization
    • Localization Functions
    • Locale URLs
    • Sort locales in the order you choose
  • ๐Ÿ“˜sa5-404
    • ๐Ÿ”About SA5's 404 Lib
    • ๐Ÿš€Quick Start | SA5 404
    • 404 Smart Search โบ
  • ๐Ÿ“˜sa5-calc
    • ๐Ÿ”About SA5's Calc Lib
      • Future
    • ๐Ÿš€Quick Start | SA5 Calc
    • Count & Sum Items โบ
      • Source Types
      • Calc Use Cases
  • ๐Ÿ“˜sa5-trigger โ›”
    • ๐Ÿ”About SA5's Trigger Lib
    • ๐Ÿš€Quick Start | SA5 Trigger
    • IX Triggers ( Legacy ) โบ
  • ๐Ÿ“˜Deprecated Features
    • Repeater โ›”
    • Lipsum Generator โ›”
    • JSON Formatter โ›”
Powered by GitBook
On this page
  • Use Cases
  • Demonstration
  • Usage Notes
  • Enable the Link with other lightboxes feature
  • Add the wfu-lightbox-group attribute
  • Getting Started ( NOCODE )
  • STEP 1 - Add the Library
  • STEP 2 - Apply the custom attributes to the elements you want to affect
  • Credits

Was this helpful?

  1. sa5-elements
  2. Lightbox Element

CMS Lightbox + Groups

Display your nested Collection List Lightboxes in separate groups

Last updated 1 year ago

Was this helpful?

Webflow's is CMS compatible, however it it the ability to CMS-bind the lightbox group.

In a CMS-driven layout like this one, we may want specific groupings of images ( here, each purple box ) to have their own distinct lightbox group.

At present, this is not natively supported in Webflow.

SA5 offers a no-code attributes-based solution to add this ability.

Important Webflow ECommerce limitation

Webflow currently does not support CMS-bound custom attributes when a CMS collection is bound to the ECommerce Products or Categories collection. This creates a configuration problem for an attributes-based library, since those custom attributes are essential for the grouping.

Currently this SA5 feature should be considered incompatible with any collection list that is bound to Webflow ECommerce Products or Categories.

Use Cases

Common examples of where designers need this;

  • Product catalogs where you have multiple product shots

  • Real estate sites

  • Event sites

Demonstration

Here is a demonstration of CMS-driven lightbox grouping, with a cloneable.

Use the cloneable as a reference for your own implementation. It will show you the exact placement and setup of the attributes for a typical product catalog configuration.

Usage Notes

This library is very flexible in its configuration options.

The documentation here will focus on the most common use case - a product gallery where each product has a main photo and series of additional photos, which we want lightboxed together in a single group.

This setup is demonstrated in the cloneable above, and here's a video walkthrough on the implementation details.

Use the video as your primary reference for this type of build, however below are some additional notes for designers who want to vary the setup.

Enable the Link with other lightboxes feature

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 lightboxes within that parent element ( descendants ) will be assigned that same lightbox group.

For example,

wfu-lightbox-group = mygroup

would assign that static string "mygroup" as the group name for every lightbox that is within your tagged element.

You can assign any unique value you choose for your group, but the purpose of this library is to make those groups dynamic, based on your CMS data.

wfu-lightbox-group = {{ slug }}

SA5 supports this "attribute affects descendants" approach because of the way Webflow's nested collection lists work in relation to custom attributes. See the descussion of this in the video above.

Choosing where to place the attribute matters, for two reasons;

  1. SA5 will apply the group you specify in the attribute to any lightboxes within that element

  2. Webflow's CMS-bound custom attributes have specific rules in what you can bind to, which means that elements within the nested collection list cannot be bound to fields of the parent collection list.

In our nested list configuration, this means that the best place to place the attribute [2] is on the parent collection list item [1].

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.

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

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

See above for details.

Credits

If you need that capability in your project, you can about building a custom, non-attributes version of this library for your project.

To do that, we'll use Webflow's and set it to the parent item's slug. This ensures that each group has a unique name.

First, add the library as detailed in .

Full credit to for the original solution approach. SA5 uses a similar group-setting approach, but has redesigned it so that there is no need to replace the lightbox element manually.

๐Ÿ“˜
contact Sygnal
CMS-bound custom-attribute feature
Quick Start
Travis Orams
detailing
lightbox element
does not provide
CMS Lightbox + Groups
Demonstration
CMS Lightbox + Groups - WebflowCMS Lightbox + Groups
Cloneable
Logo
Logo