Composant "Galerie à faire glisser"

Ce composant n'est pas compatible avec les annonces AMP HTML, les annonces vidéo ni les annonces illustrées.

Le composant "Galerie à faire glisser" permet de créer une galerie simple que les utilisateurs peuvent faire glisser vers l'avant ou vers l'arrière pour afficher un ensemble d'images différentes ou un ensemble de groupes différents. Vous pouvez utiliser une galerie à faire glisser dans une annonce dynamique.

Choisir la galerie appropriée

Google Web Designer propose quatre composants "Galerie" différents :

Le composant Galerie à 360° affiche les images des différents côtés d'un objet. Pour le faire pivoter, il suffit de le faire glisser vers l'avant ou vers l'arrière. Ce composant ne permet pas d'afficher des groupes ni des éléments de navigation.
Le composant Galerie à faire glisser est doté d'un affichage simple et plat, et vous permet de faire défiler des images ou des groupes verticalement ou horizontalement.
Le composant Galerie carrousel est semblable au composant "Galerie à faire glisser", mais confère aux images voisines un aspect tridimensionnel, comme si elles s'affichaient sur un support rotatif.
Le composant Galerie de transition propose une série d'effets d'animation lors du passage d'une image à une autre.

Pour utiliser le composant "Galerie à faire glisser", procédez comme suit :

Ouvrez le panneau Composants, puis le dossier Galeries.
Faites glisser le composant Galerie à faire glisser sur l'espace de création.
Dans la section regroupant les propriétés du composant "Galerie à faire glisser" du panneau Propriétés, attribuez un nom au composant.
Ajoutez un ensemble d'images ou un ensemble de groupes. Les groupes permettent d'afficher des éléments autres que des images ou d'afficher plusieurs éléments sur une seule image.
- Pour ajouter des images, procédez de l'une des façons suivantes :
  - Dans la section regroupant les propriétés du composant "Galerie à faire glisser" du panneau Propriétés, ajoutez les URL des images dans le champ Images en les séparant par une virgule.
  - Dans la section regroupant les propriétés du composant "Galerie à faire glisser" du panneau Propriétés, cliquez sur le bouton Sélectionner des images de la galerie . Cliquez sur le bouton Sélectionner des fichiers pour accéder aux fichiers image ou faites glisser directement ces derniers dans la boîte de dialogue.
- Pour ajouter des groupes à la galerie, procédez comme suit :
  - Dans la section regroupant les propriétés du composant "Galerie à faire glisser" du panneau Propriétés, ajoutez une liste de noms de groupes dans le champ Groupes en les séparant par une virgule.
Vous pouvez aussi modifier les propriétés du composant (elles sont décrites ci-dessous).

Utiliser des groupes dans le composant "Galerie à faire glisser"

Le composant "Galerie à faire glisser" peut contenir un ensemble d'images ou un ensemble de groupes. Les groupes vous permettent d'utiliser des éléments autres que des images (des vidéos, par exemple) ou d'inclure plusieurs éléments dans une seule image de la galerie (tels que des légendes).

Lorsque vous utilisez des vidéos ou d'autres éléments interactifs, sélectionnez Désactiver le balayage dans le panneau des propriétés. L'utilisateur peut ainsi interagir avec les commandes vidéo. Le composant "Navigation dans la galerie" permet de parcourir les images de la galerie.

Pour créer une galerie combinant des images et des groupes, commencez par convertir en groupes les images à utiliser.

Vous pouvez également afficher plusieurs éléments dynamiques dans la galerie en utilisant des groupes.

Pour réorganiser les images ou en supprimer de la galerie, procédez comme suit :

Dans la section regroupant les propriétés du composant "Galerie à faire glisser" du panneau Propriétés, cliquez sur le bouton Sélectionner des images de la galerie .
Faites glisser une image vers une autre position pour réorganiser la galerie. Pour supprimer une image de la galerie, passez la souris dessus, puis cliquez sur le bouton Supprimer .
Cliquez sur OK.

Propriétés

Propriété	Description
Nom	Permet d'attribuer un nom à la galerie à faire glisser.
Images	Permet de sélectionner les images de la galerie. Cette propriété peut être associée à des données dynamiques.
Groupes	Liste de groupes à utiliser dans la galerie, séparés par une virgule. Cette propriété peut être associée à des données dynamiques.
Transition	Permet de définir la durée de la transition entre les images (en millisecondes).
Image de départ	Permet de définir le numéro de l'image à afficher en premier.
Afficher les images	Permet de définir le nombre d'images à afficher simultanément dans la galerie.
Faire glisser les images	Permet de définir le nombre d'images à faire avancer à chaque balayage de l'écran.
Lecture automatique	Lorsque cette case est cochée, les images de la galerie sont lues automatiquement.
Inclure la navigation	Lorsque cette case est cochée, des icônes de navigation permettent de parcourir la galerie.
Utiliser des vignettes	Lorsque cette case et la case "Inclure la navigation" sont cochées, des vignettes sont affichées à la place des icônes pour la navigation.
Couleur de surbrillance	Permet de définir la couleur de mise en surbrillance de l'image de navigation.
Échelle	Permet de configurer l'affichage d'images de tailles différentes dans un cadre de taille fixe : Redimensionner l'image pour l'ajuster à l'espace : cette option permet de redimensionner l'image de sorte qu'elle soit adaptée aux dimensions du cadre, tout en gardant ses proportions et sans la recadrer. Des marges internes sont ajoutées si les proportions de l'image et du cadre sont différentes. Recadrer l'image pour remplir l'espace : cette option permet de redimensionner l'image de sorte qu'elle occupe l'intégralité du cadre. Elle est recadrée si les proportions de l'image et du cadre sont différentes. Aucune : l'image est affichée dans sa taille d'origine et est centrée au sein du cadre. Si l'image est plus petite que le cadre, l'espace en trop est défini comme étant transparent. Si l'image est plus grande, elle est recadrée. Agrandir l'image pour remplir l'espace : cette option permet de redimensionner et d'étirer l'image de sorte que ses dimensions correspondent à celles du cadre, sans la recadrer.
Sens	Permet de définir si les images de la galerie sont balayées horizontalement ou verticalement.

Propriétés avancées

Pour afficher les propriétés avancées, cliquez sur l'icône de développement à côté de la section Propriétés avancées du panneau des propriétés du composant.

Propriété avancée	Description
Décalage entre les images	Permet de définir la distance entre les images.
Largeur de l'image	Permet de définir la largeur, en pixels, de l'image dans la galerie.
Hauteur de l'image	Permet de définir la hauteur, en pixels, de l'image dans la galerie.
Durée de la lecture automatique	Durée de lecture de la galerie, en millisecondes, de la première à la dernière image. Cette durée est répartie de manière égale entre chaque image, sauf si un intervalle d'incrément de lecture automatique est défini.
Intervalle de l'incrément de lecture automatique	Durée d'affichage, en millisecondes, de chaque image lorsque la lecture automatique est activée. Les images sont affichées pendant cette durée jusqu'à ce que la durée totale de lecture ait été atteinte, pendant plusieurs cycles si nécessaire.
URL de sortie	Liste d'URL séparées par une virgule, correspondant à chaque image dans la galerie. Cette propriété peut être associée à des données dynamiques.
Désactiver le balayage	Cette case à cocher permet de désactiver le balayage dans la galerie. L'utilisateur peut ainsi interagir avec les éléments du cadre, sans changer de cadre de manière accidentelle. Lorsque cette case est cochée, vous pouvez utiliser soit la propriété "Inclure la navigation", soit le composant Navigation dans la galerie pour changer d'image.
Suspendre la lecture des contenus multimédias lors de la fermeture d'une image	Lorsque cette option est activée, la lecture des éléments audio ou vidéo présents dans l'image en cours est mise en pause à chaque changement d'image (pour éviter que du contenu indésirable ne s'affiche en arrière-plan).
Reprendre la lecture des contenus multimédias lors de l'ouverture d'une image	Lorsque cette option est activée, la lecture des éléments audio ou vidéo mis en pause reprend dans l'image suivante dès que celle-ci apparaît.

Événements et actions

Événements envoyés par le composant "Galerie à faire glisser"

Vous pouvez déclencher d'autres actions en fonction des événements suivants du composant "Galerie à faire glisser" :

Événement	Description
Première interaction	Envoyé lorsque l'utilisateur interagit pour la première fois avec la galerie.
Toutes les images affichées	Envoyé lorsque chaque image de la galerie s'est affichée au moins une fois.
Images chargées	Envoyé lorsque toutes les images de la galerie ont été chargées.
Lecture automatique terminée	Envoyé lorsque la lecture automatique se termine pour une raison quelconque.
Image affichée	Envoyé lorsque chaque nouvelle image s'est affichée dans son intégralité.
Image activée	Envoyé lorsqu'un changement d'image a commencé.
Lecture automatique de l'image	Envoyé lorsqu'une image est automatiquement affichée pendant la lecture automatique.
Appui sur l'image	Envoyé lorsque l'utilisateur clique sur l'image.
Extrémité gauche	Envoyé lorsque la galerie atteint son extrémité gauche à l'issue du balayage.
Extrémité droite	Envoyé lorsque la galerie atteint son extrémité droite à l'issue du balayage.
Souris sur une image	Envoyé lorsque le curseur de la souris passe sur l'image.
Souris hors d'une image	Envoyé lorsque le curseur de la souris sort de l'image.
Démarrage du suivi	Envoyé lorsque l'opération de glissement effectuée au moyen de la souris ou du doigt débute.
Effectuer le suivi	Des données de localisation (positions X et Y) associées à la trajectoire du curseur de la souris et du doigt sont enregistrées dans le composant.
Fin du suivi	Envoyé lorsque l'opération de glissement effectuée au moyen de la souris ou du doigt se termine.

Pour sélectionner l'un de ces événements dans la boîte de dialogue Événement, définissez le composant "Galerie à faire glisser" en tant que cible.

Actions effectuées par le composant "Galerie à faire glisser"

Les actions suivantes du composant "Galerie à faire glisser" peuvent être déclenchées en réponse à d'autres événements :

Action	Options de configuration
Atteindre l'image	Numéro de l'image Animation : "none" ou "slide"
Rotation unique	Durée de la rotation : durée, en millisecondes Sens : "forwards" ou "backwards"
Arrêter la rotation	Aucune
Avance rapide	Aucune
Retour rapide	Aucune

Lorsque vous sélectionnez l'une de ces actions dans la boîte de dialogue Événement, définissez le composant "Galerie à faire glisser" en tant que destinataire.

Découvrez comment configurer des événements.

Aperçu

Dans l'espace de création, la galerie à faire glisser n'affiche que l'image de départ pour vous donner une idée de la façon dont se présente le composant. Pour voir comment cela fonctionne, prévisualisez le document dans votre navigateur préféré en cliquant sur le bouton Aperçu en haut à droite.

Ces informations vous-ont elles été utiles ?

Comment pouvons-nous l'améliorer ?