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>
Bu sayfadaki açıklamalar tüm sorularınıza yanıt vermiyorsa, özgün kullanım durumunuzu tartışmak üzere diğer AMP kullanıcılarına ulaşmaktan çekinmeyin.
Stack Overflow'a git Açıklanmayan bir özellik mi var?AMP projesi, katılımınızı ve katkılarınızı güçlü bir şekilde teşvik ediyor! Açık kaynak topluluğumuzun devamlı bir katılımcısı olacağınızı umuyoruz ancak özel olarak ilgilendiğiniz konularla ilgili tek seferlik katkıları da memnuniyetle karşılıyoruz.
Örneği GitHub'ta düzenle-