amp-image-lightbox
Introduction
The amp-image-lightbox component allows the user to expand an image to fill the viewport.
Setup
Import the amp-image-lightbox component in the header
<script async custom-element="amp-image-lightbox" src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"></script>
Basic usage
The amp-image-lightbox is activated using the on action on an amp-img element referencing the lightbox element's ID.
<amp-img on="tap:lightbox1" role="button" tabindex="0" src="https://amp.dev/static/samples/img/Border_Collie.jpg" alt="Picture of a dog" title="Picture of a dog, view in lightbox" layout="responsive" width="300" height="246"></amp-img>
<amp-image-lightbox id="lightbox1" layout="nodisplay"></amp-image-lightbox>
Multi image support
It is even possible to show different images in the same amp-image-lightbox. Here is another image using the same lightbox.
<amp-img on="tap:lightbox1" role="button" tabindex="0" src="https://amp.dev/static/samples/img/Hovawart.jpg" alt="Picture of a dog" title="Picture of a dog, view in lightbox" layout="responsive" width="600" height="400"></amp-img>
Caption: figcaption
The amp-image-lightbox also can optionally display a caption for the image at the bottom of the viewport. This can either be the contents of the <figcaption> element when the image is in the figure tag...
<figure>
<amp-img on="tap:lightbox1" role="button" tabindex="0" src="https://amp.dev/static/samples/img/Border_Collie.jpg" alt="Picture of a dog" title="Picture of a dog, view in lightbox" layout="responsive" width="300" height="246"></amp-img>
<figcaption>Border Collie.</figcaption>
</figure>
Caption: aria-describedby
... or the contents of the element whose ID is specified by the image's aria-describedby attribute.
<amp-img on="tap:lightbox1" role="button" tabindex="0" aria-describedby="imageDescription" alt="Picture of a dog" title="Picture of a dog, view in lightbox" src="https://amp.dev/static/samples/img/Border_Collie.jpg" width="300" height="246"></amp-img>
<div id="imageDescription">
This is a border collie.
</div>
Si les explications de cette page ne répondent pas à vos questions, n'hésitez pas à contacter d'autres utilisateurs d'AMP pour discuter de votre cas d'utilisation spécifique.
Se rendre sur Stack Overflow Une fonctionnalité n'a pas encore été expliquée ?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.
Modifier l'exemple sur GitHub-