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>
このページの説明でご質問のすべてを解消できない場合は、あなたの実際の使用事例について他の AMP ユーザーに問い合わせて話し合ってください。
Stack Overflow にアクセスする 説明されていない機能ですか？AMP プロジェクトでは皆さんの参加と貢献を強くお勧めしています！当社はオープンソースコミュニティに継続的にご参加いただくことを希望しますが、特に熱心に取り組んでいる問題があれば1回限りの貢献でも歓迎します。
GitHub でサンプルを編集する-