Comment corriger une lightbox Webflow avec Finsweet ?
Apprenez à corriger les problèmes de z-index et de position des lightboxes Webflow avec Finsweet Attributes Lightbox.
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.
| Problème natif | Cause | Solution Finsweet |
|---|---|---|
| Lightbox masquée par d'autres éléments | z-index insuffisant | Déplace la lightbox à la racine du DOM |
| Lightbox décalée avec overflow: hidden | Contrainte du conteneur parent | Extraction hors du conteneur |
| Lightbox coupée avec transform CSS | Contexte de stacking du parent | Repositionnement dans le body |
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
<script src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-lightbox@1/lightbox.js" defer>script>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
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
.avif)
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
