amp-lightbox
Description
Afficher des éléments dans une fenêtre modale "lightbox" en plein écran.
Required Scripts
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
Supported Layouts
| Description | Affiche des éléments dans une fenêtre modale "lightbox" en plein écran. |
| Script requis | <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script> |
| Mises en page compatibles | nodisplay |
| Exemples | Consultez l'exemple de composant amp-lightbox sur AMP By Example. |
Comportement
Le composant amp-lightbox définit les éléments enfants qui s'affichent dans une superposition ou une fenêtre modale en plein écran. Lorsque l'utilisateur clique ou appuie sur un élément (un bouton, par exemple), l'identifiant amp-lightbox référencé dans l'attribut on de l'élément sélectionné affiche l'annonce Lightbox sur toute la surface de la fenêtre affichage et présente les éléments enfants du composant amp-lightbox.
La touche Échap permet de fermer le mode Lightbox. Vous pouvez également définir l'attribut on sur un ou plusieurs éléments de l'annonce Lightbox et définir sa méthode sur close pour fermer le mode Lightbox lorsque l'utilisateur appuie ou clique sur l'élément.
<button on="tap:quote-lb">See Quote</button>
<amp-lightbox id="quote-lb" layout="nodisplay">
<blockquote>"Don't talk to me about JavaScript fatigue" - Horse JS</blockquote>
<button on="tap:quote-lb.close">Nice!</button>
</amp-lightbox>
<amp-image-lightbox>. Attributs
| animate-in (facultatif) | Définit le style d'animation pour l'ouverture de l'annonce Lightbox. Par défaut, cet attribut est défini sur fade-in. Les valeurs valides sont fade-in, fly-in-bottom et fly-in-top. Remarque : Les préréglages d'animation fly-in-* modifient la propriété transform de l'élément amp-lightbox. Évitez de transformer directement l'élément amp-lightbox. Si vous devez appliquer une transformation, définissez-la plutôt sur un élément imbriqué. |
| close-button (obligatoire sur les annonces AMP HTML) | Affiche un en-tête de bouton de fermeture en haut de l'annonce Lightbox. Cet attribut n'est obligatoire et valide qu'avec les annonces AMP HTML. |
| id (obligatoire) | Identifiant unique de l'annonce Lightbox. |
| layout (obligatoire) | Doit être défini sur nodisplay. |
| scrollable (facultatif) | Lorsque l'attribut scrollable est utilisé, l'internaute peut faire défiler le contenu de l'annonce Lightbox si sa taille est supérieure à la hauteur définie pour ce mode. Remarque : L'attribut scrollable n'est pas autorisé lorsque l'élément <amp-lightbox> est utilisé dans une annonce AMP HTML. Pour plus d'informations, consultez la section Utiliser amp-lightbox dans des annonces AMP HTML. |
| scrollable (facultatif) |
Application d'un style
Vous pouvez appliquer un style au composant amp-lightbox à l'aide d'une feuille de style (CSS) standard.
Actions
Le composant amp-lightbox présente les actions que vous pouvez déclencher avec la syntaxe de l'attribut "on" d'AMP :
| Action | Description |
|---|---|
open (par défaut) | Ouvre le mode Lightbox. |
close | Ferme le mode Lightbox. |
Utiliser amp-lightbox dans des annonces AMP HTML
amp-lightbox à utiliser dans les annonces AMP HTML est proposé à titre expérimental et est actuellement en cours de développement. Pour utiliser amp-lightbox dans des annonces AMP HTML, activez le test amp-lightbox-a4a-proto. Notons quelques différences selon que le composant amp-lightbox est utilisé dans des documents AMP standards ou dans des annonces écrites dans le langage AMP HTML :
Attribut close-button obligatoire
L'attribut close-button est obligatoire pour les annonces AMP HTML. Cet attribut permet d'afficher un en-tête en haut de votre annonce Lightbox. L'en-tête contient un bouton de fermeture et un libellé qui indique "Ad" (Annonce). Cet en-tête est obligatoire pour :
- définir une interface utilisateur cohérente et prévisible pour les annonces AMP HTML ;
- s'assurer qu'il existe toujours un moyen de quitter le mode Lightbox ; autrement, la création risquerait de "pirater" le contenu du document hôte via une annonce Lightbox.
L'attribut close-button est obligatoire et n'est autorisé que dans les annonces AMP HTML. Dans les documents AMP standards, vous pouvez afficher un bouton de fermeture à tout moment dans le cadre du contenu <amp-lightbox>.
Le mode Lightbox déroulant n'est pas autorisé
Le mode Lightbox déroulant n'est pas autorisé pour les annonces AMP HTML.
Arrière-plan transparent
Lorsque vous utilisez <amp-lightbox> dans des annonces AMP HTML, l'arrière-plan de votre élément <body> devient transparent, car l'exécution AMP redimensionne et réaligne le contenu de votre création avant le développement du mode Lightbox. Cela permet d'éviter un "saut" visuel de la création pendant l'affichage du mode Lightbox. Si un arrière-plan est nécessaire pour votre création, définissez-la sur un conteneur intermédiaire (comme un <div> plein écran) au lieu d'utiliser l'élément <body>.
Lorsque l'annonce AMP HTML est diffusée dans un environnement tiers (dans un document non AMP, par exemple), la création est centrée par rapport à la fenêtre d'affichage, puis elle est développée. Cela est dû au fait que les cadres iFrame tiers doivent utiliser une API postMessage pour activer des fonctionnalités telles que le redimensionnement des cadres (qui est de type asynchrone). Commencer par le centrage de la création permet donc une transition en douceur, sans sauts d'images.
Exemples de transitions dans le mode Lightbox pour les annonces AMP HTML
Dans les exemples ci-dessous, vous pouvez voir comment la transition recherche une annonce AMP HTML dont l'attribut animate-in="fly-in-bottom" est défini sur l'élément Lightbox pour une annonce AMP HTML dans un friendly iframe et pour une annonce AMP HTML dans un iFrame tiers.
Sur des friendly iframes (provenant, par exemple, d'un cache AMP)
Sur des cadres iFrame tiers (par exemple, en dehors du cache AMP)
Validation
Consultez les règles relatives à amp-lightbox dans les spécifications du validateur AMP.
Vous avez lu ce document une douzaine de fois mais il ne répond pas à toutes vos questions ? D'autres personnes ont peut-être eu le même sentiment. Contactez-les sur Stack Overflow.
Se rendre sur Stack Overflow Vous avez trouvé un bug ou une fonctionnalité manquante ?Le projet AMP encourage fortement votre participation et vos contributions ! Nous espérons que vous deviendrez un membre régulier de notre communauté open source, mais nous serons également ravis de recevoir des contributions ponctuelles concernant les questions qui vous intéressent particulièrement.
Se rendre sur GitHub