Amp-lightbox
Komponen amp-lightbox memungkinkan "lightbox" atau pengalaman serupa - di mana interaksi pengguna diperluas untuk mengisi pemirsa, sampai pengguna menutupnya lagi.
Disposisi
Masukkan script berikut tepat setelah pembukaan <head>
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
Penggunaan dasar
Komponen amp-lightbox menentukan elemen turunan yang akan ditampilkan dalam overlay tampilan penuh. Untuk menutup kotak cahaya dengan mengklik atau menyentuh, gunakan atribut pada pada satu atau lebih elemen dalam kotak cahaya. Dalam contoh ini, pengguna dapat mengklik
Contohnya: <amp-lightbox id="my-lightbox" layout="nodisplay"> <div class="lightbox" on="tap:my-lightbox.close" role="button" tabindex="0"> <h1>Hello World!</h1> </div> </amp-lightbox>
Lighbox ditampilkan ketika pengguna mengetik atau mengklik suatu elemen dengan atribut yang menunjuk ke id suatu elemen amp-lightbox.
<button class="ampstart-btn caps m2" on="tap:my-lightbox" role="button" tabindex="0"> Open lightbox </button>
Untuk menampilkan gambar di lightbox, AMP juga menyertakan komponen amp-image-lightbox, Anda tidak perlu gambar yang ditentukan dua kali.