Lightbox Webflow con loop infinito (galleria accessibile)

Alla fine di questa lezione saprai potenziare la lightbox nativa di Webflow con la navigazione a loop infinito — così, appena qualcuno apre la tua galleria, può continuare a cliccare avanti o indietro all’infinito, senza vicoli ciechi e senza stop imbarazzanti. È un piccolo fix a una delle limitazioni più fastidiose della lightbox nativa, e fa sentire una galleria come dovrebbe essere: fluida e senza interruzioni.

Di default, appena arrivi al primo o all’ultimo item di un gruppo lightbox sei bloccato — puoi solo tornare indietro nella direzione opposta. È un muro strano da incontrare in qualcosa pensato per essere continuo. La buona notizia è che tutto il potenziamento si riduce a un solo attributo custom, e funziona con galleria CMS, con galleria di lightbox statiche, su desktop e su mobile.

La parte che mi sta più a cuore, però, è che resta pienamente accessibile. Non è solo un’esperienza più bella per chi usa il mouse — è la garanzia che chi naviga con la tastiera o con tecnologie assistive possa attraversare tutta la galleria senza restare mai bloccato.

Come funziona

La struttura della galleria. Il punto di partenza è una semplice collezione CMS — chiamiamola Pictures — con solo un campo immagine e un campo di testo semplice per l’alt text di ogni immagine, oltre ai campi name e slug di default. Dentro la solita struttura section/container/content-wrapper c’è una collection list legata a quella collezione. Ogni item contiene un elemento lightbox nativo di Webflow, e dentro la lightbox vivono l’immagine (collegata al campo immagine del CMS, con l’alt text agganciato al campo alt) e un heading. Legare l’alt text al CMS fa sì che ogni immagine si annunci come si deve — l’accessibilità comincia qui, prima di qualsiasi script.

Il raggruppamento è la colla. Nelle impostazioni dell’elemento lightbox, il media è collegato al campo immagine del CMS, e a ogni lightbox viene assegnato lo stesso nome di gruppo (per esempio, gallery). Dato che condividono tutte quel nome, Webflow le unisce in automatico in un unico gruppo lightbox — ed è questo che ti permette di sfogliare tutto il set partendo da qualsiasi immagine. Vale la stessa idea per una galleria statica: dai a ogni lightbox statica lo stesso nome di gruppo e si comporta allo stesso modo.

Cosa fa davvero lo script. Tutto il codice vive nella sezione Before </body> della pagina. Potenzia la lightbox nativa aggiungendo un loop infinito fluido in entrambe le direzioni, ma il suo compito più importante è l’accessibilità. Lo script tiene attivamente d’occhio le frecce di navigazione e impedisce che si disabilitino mai — così nessuno, con tastiera o mouse, arriva a un vicolo cieco o perde il segno dentro la galleria. L’esperienza resta inclusiva, fluida e prevedibile.

Una sola cosa da configurare. Il codice è commentato dappertutto se vuoi leggerlo, ma per farlo funzionare ti basta sapere una cosa: l’attributo custom data-lightbox-trigger. È il selettore che lo script usa per trovare ogni lightbox da potenziare, quindi va direttamente sull’elemento lightbox. E dato che la lightbox sta dentro un item della collezione, quell’attributo viene applicato in un colpo solo a ogni lightbox della collection list — il setup scala senza sforzo in più. (L’effetto hover sulle card che magari noti nella demo è una tecnica CSS a parte, spiegata in una lezione dedicata; non fa parte di questo potenziamento.)

Come si usa

1. Clona il progetto dal link Webflow nelle risorse qui sotto, così parti dallo script e dalla struttura già funzionanti.
2. Costruisci (o riusa) la tua galleria. Metti un elemento lightbox nativo dentro ogni item — una collection list CMS per una galleria dinamica, o una fila di lightbox statiche per una fissa. Collega il media della lightbox al tuo campo immagine (e lega l’alt text a un campo di testo CMS così ogni immagine è descritta).
3. Dai a ogni lightbox lo stesso nome di gruppo (es. gallery) così navigano come un unico set. Per una galleria CMS lo imposti una volta sulla lightbox dell’item; per una statica, imposta lo stesso gruppo su ciascun elemento.
4. Aggiungi l’attributo data-lightbox-trigger all’elemento lightbox. Dentro un item di collezione si applica in automatico a ogni card generata; per le gallerie statiche, mettilo su ogni lightbox.
5. Lascia lo script al suo posto in Before </body> (arriva con il cloneable — nessuna modifica necessaria).
6. Pubblica e testa. In preview o sul sito live, apri la galleria e verifica di poter continuare a cliccare avanti o indietro all’infinito. Poi testa l’accessibilità: usa i tasti freccia sinistra e destra, e premi Tab per spostare il focus su una freccia di navigazione e Invio per continuare a muoverti. Tutto dovrebbe ciclare in modo fluido, con le frecce che non si disabilitano mai.