Comment corriger une lightbox Webflow avec Finsweet ?

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment corriger les problèmes de z-index et de position des lightboxes dans Webflow avec Finsweet Attributes Lightbox.

Comprendre le problème

La lightbox native de Webflow est insérée dans le DOM à l'endroit où vous la placez dans votre layout. Si un ancêtre a overflow: hidden, transform, position: fixed ou un z-index bas, la lightbox peut être coupée, masquée ou mal positionnée. Finsweet Lightbox déplace le modal de la lightbox directement à la racine du body au moment de l'ouverture, éliminant tous ces problèmes de contexte CSS.

1. Ajoutez le script dans le head

2. Ajoutez l'attribut sur votre lightbox

Sur votre élément Lightbox Webflow (le Link Block avec la classe w-lightbox), ajoutez simplement : fs-lightbox-element="lightbox". C'est tout. Finsweet gère automatiquement le déplacement dans le DOM à l'ouverture et le nettoyage à la fermeture.

3. Lightboxes dans des Collections CMS

Finsweet Lightbox fonctionne parfaitement dans les Collection Lists. Chaque lightbox de la liste est traitée individuellement. Les galeries d'images liées (groupe de lightboxes avec navigation précédent/suivant) sont aussi supportées.

Conclusion

Finsweet Lightbox est une solution d'une ligne d'attribut pour un problème récurrent. Cas d'usage :

• Galeries d'images dans des sections avec overflow: hidden
• Lightboxes dans des cards avec transform (hover effect)
• Vidéos en lightbox dans des layouts complexes