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 مشاركتك ومساهمتك بشدة! ونأمل أن تكون مشاركًا دائمًا في مجتمعنا مفتوح المصدر، ولكننا نشجع أيضًا المساهمات التي تحدث لمرة واحدة في الأمور التي تتحمس لها.
تعديل العينة على GitHub-