Lightbox - Aide Webflow
Utilisez l'élément lightbox pour afficher des images ou vidéos dans une fenêtre modale plein écran.
Comment créer un lightbox
Un lightbox est une vignette cliquable imbriquée dans un bloc de lien. Lorsque les visiteurs du site cliquent à l'intérieur des limites du lien sur le site en direct, le lightbox s'ouvre pour afficher le média qui y est connecté. Vous pouvez ajouter un lightbox depuis Panneau Ajouter > Avancé.
Comment fonctionne l'image miniature de remplacement du lightbox
Le lightbox contient un élément image qui se comporte comme n'importe quel autre élément image. Vous pouvez le redimensionner, double-cliquer pour remplacer l'image miniature de remplacement et ajouter du texte alternatif. En savoir plus sur les éléments d'image.
Vous pouvez utiliser la même image pour la miniature du lightbox et la grande fenêtre modale du lightbox. Webflow crée automatiquement des variantes réactives pour toutes les images en ligne. En savoir plus sur les images réactives.
Comment remplacer la miniature du lightbox par d'autres contenus
Vous remplacez l'élément image de remplacement et faites glisser et déposez d'autres contenus (par exemple, un titre ou tout autre élément non-lié) à l'intérieur du lien lightbox.
Vous pouvez également utiliser un bloc div et appliquer une image de fond pour créer des vignettes d'image de taille égale.
Comment styliser le lightbox
Vous pouvez styliser à la fois le lien de la lightbox et son contenu. Par exemple, si vous imbriquez des éléments de texte dans votre lien de lightbox, vous pouvez styliser la typographie de l'élément de lien de la lightbox.
Comment ajouter des médias à la lightbox
Pour ajouter une image et une légende à la fenêtre modale de la lightbox :
- Sélectionnez le lien de la lightbox sur le canevas
- Allez dans le Panneau des paramètres de l'élément > Paramètres du lien de la lightbox > Médias
- Cliquez sur l'icône “Ajouter un élément à la liste”
- Choisissez "Image" comme Type
- Cliquez sur Remplacer l'image
- Sélectionnez une image dans le Panneau des ressources
- Ajoutez une Légende si nécessaire
Vous pouvez ajouter autant d'images que vous le souhaitez à un lien de lightbox. Ces images seront affichées sous forme de diaporama à l'intérieur de la fenêtre modale de la lightbox.
Pour ajouter une vidéo à la fenêtre modale de la lightbox :
- Sélectionnez le lien de la lightbox sur le canevas
- Allez dans le Panneau des paramètres de l'élément > Paramètres du lien de la lightbox > Médias
- Cliquez sur l'icône “Ajouter un élément à la liste”
- Choisissez "Vidéo" comme Type
- Ajoutez l'URL de la vidéo dans le champ URL
- Ajoutez un Titre si nécessaire
Lightbox pour images et vidéos - Tutoriel de conception Web
Comment créer des lightboxes dynamiques à partir des médias des champs de Collection
Vous pouvez créer des lightboxes dynamiques en extrayant l'image miniature et/ou les médias de la lightbox à partir des champs de Collection de médias (c'est-à-dire un champ d'image, un champ multi-images ou un champ vidéo) dans vos Collections CMS ou Ecommerce.
Pour connecter un champ de Collection dynamique à la miniature de la lightbox :
- Ajoutez une lightbox à une liste de Collection connectée dynamiquement ou à une page de Collection CMS
- Sélectionnez l'image miniature de l'espace réservé
- Allez dans Paramètres de l'élément > Paramètres de l'image
- Cliquez sur l'icône "point violet" dans le champ Image
- Sélectionnez un champ de Collection d'images
Ensuite, vous pouvez connecter la lightbox au champ Collection, afin que vos images dynamiques de Collection soient disponibles dans la lightbox. Pour connecter un champ de Collection dynamique au média de la lightbox :
- Sélectionnez le lien de la lightbox
- Allez dans Paramètres de l'élément > Paramètres du lien de la lightbox
- Cliquez sur l'icône "point violet" dans le champ Média
- Sélectionnez un champ de Collection de médias
Pour connecter une lightbox à un champ multi-images :
- Ajoutez une liste de Collection à une page de Collection
- Connectez la liste de Collection au champ multi-images en cliquant sur le menu déroulant Source et en sélectionnant le champ multi-images
- Ajoutez une lightbox à la liste de Collection
- Sélectionnez l'élément image dans la lightbox
- Allez dans Paramètres de l'élément > Paramètres de l'image
- Cliquez sur l'icône "point violet" dans le champ Image
- Sélectionnez le champ multi-images
- Sélectionnez le lien de la lightbox sur le canevas
- Allez dans Paramètres de l'élément > Paramètres du lien de la lightbox
- Cliquez sur l'icône "point violet" dans le champ Média
- Sélectionnez le champ multi-images
Vous pouvez également connecter une lightbox à un champ multi-images lorsque la lightbox est ajoutée aux listes de Collection ou aux pages de Collection.
Comment lier des lightboxes en utilisant des groupes de lightbox
Vous pouvez lier plusieurs lightboxes ensemble pour créer une galerie diaporama. Lorsqu'un visiteur du site clique sur une lightbox liée, la lightbox ouvrira tous les médias associés au groupe lié.
Comment créer un groupe de lightbox
- Sélectionnez n'importe quel élément dans une lightbox
- Allez dans Paramètres de l'élément > Paramètres de la lightbox
- Entrez un nom de groupe dans le champ Correspondre ou créer un nom de groupe
Les lightboxes utilisant le même nom de groupe sont liées dans un groupe.
Pour les lightboxes dans les listes de Collection, créer et lier une lightbox dans un élément de Collection lie automatiquement toutes les lightboxes de la liste de Collection.
Créer plusieurs groupes de lightbox sur une page
Si plusieurs lightboxes se trouvent sur la même page, vous pouvez les séparer en attribuant à chaque groupe de lightbox un Nom de groupe différent.