amp-lightbox
Description
Displays elements in a full-viewport “lightbox” modal.
Required Scripts
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
Supported Layouts
| Deskripsi | Menampilkan elemen dalam modal "lightbox" viewport penuh. |
| Skrip yang Diperlukan | <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script> |
| Tata Letak yang Didukung | nodisplay |
| Contoh | Lihat contoh amp-lightbox di AMP By Example. |
Perilaku
Komponen amp-lightbox menentukan elemen turunan yang ditampilkan dalam modal/overlay viewport penuh. Saat pengguna menge-tap atau mengklik sebuah elemen (misalnya tombol), ID amp-lightbox yang dirujuk dalam atribut on elemen yang diklik akan memicu lightbox agar mengisi viewport penuh dan menampilkan elemen turunan amp-lightbox.
Menekan tombol escape pada keyboard akan menutup lightbox. Cara lainnya, menetapkan atribut on pada satu atau beberapa elemen dalam lightbox dan menetapkan metodenya ke close akan menutup lightbox saat elemen di-tap atau diklik.
<button on="tap:quote-lb">See Quote</button>
<amp-lightbox id="quote-lb" layout="nodisplay">
<blockquote>"Don't talk to me about JavaScript fatigue" - Horse JS</blockquote>
<button on="tap:quote-lb.close">Nice!</button>
</amp-lightbox>
<amp-image-lightbox>. Atribut
| animate-in (opsional) | Menentukan gaya animasi untuk membuka lightbox. Secara default, nilai ini ditetapkan ke fade-in. Nilai yang valid adalah fade-in, fly-in-bottom, dan fly-in-top. Catatan: Preset animasi fly-in-* mengubah properti transform elemen amp-lightbox. Jangan mengandalkan transformasi elemen amp-lightbox secara langsung. Jika Anda perlu menerapkan transformasi, tetapkan hal itu pada elemen bertingkat. |
| close-button (wajib dalam iklan AMPHTML) | Merender header tombol tutup di bagian atas lightbox. Atribut ini hanya wajib dan valid untuk penggunaan dengan Iklan AMPHTML. |
| id (wajib) | ID unik untuk lightbox. |
| layout (wajib) | Harus ditetapkan ke nodisplay. |
| scrollable (opsional) | Apabila atribut scrollable ada, konten lightbox dapat di-scroll jika melebihi tinggi lightbox. Catatan: Atribut scrollable tidak diizinkan saat menggunakan <amp-lightbox> di dalam iklan AMPHTML. Untuk selengkapnya, baca bagian Menggunakan amp-lightbox dalam iklan AMPHTML. |
| scrollable (opsional) |
Penataan gaya
Anda dapat mengatur gaya amp-lightbox dengan CSS standar.
Tindakan
amp-lightbox menampilkan tindakan berikut yang dapat Anda gunakan pada AMP on-syntax untuk memicu:
| Tindakan | Deskripsi |
|---|---|
open (default) | Membuka lightbox. |
close | Menutup lightbox. |
Menggunakan amp-lightbox dalam iklan AMPHTML
amp-lightbox untuk digunakan dalam ikan AMPHTML masih bersifat eksperimental dan terus mengalami pengembangan. Untuk menggunakan amp-lightbox dalam iklan AMPHTML, aktifkan eksperimen amp-lightbox-a4a-proto. Ada beberapa perbedaan antara menggunakan amp-lightbox dalam dokumen AMP normal dengan iklan yang ditulis dalam AMPHTML:
Memerlukan close-button
Untuk iklan AMPHTML, atribut close-button wajib ada. Atribut ini menyebabkan header dirender di bagian atas lightbox. Header berisi tombol tutup dan label yang menampilkan "Ad" (Iklan). Persyaratan header ini diperlukan untuk:
- Menetapkan pengalaman pengguna yang konsisten dan dapat diprediksi untuk iklan AMPHTML.
- Memastikan bahwa titik keluar untuk lightbox selalu ada; jika tidak, materi iklan dapat secara efektif membajak konten dokumen host melalui lightbox.
Atribut close-button wajib dan hanya diizinkan dalam iklan AMPHTML. Dalam dokumen AMP reguler, Anda dapat merender tombol tutup di mana pun diperlukan sebagai bagian dari konten <amp-lightbox>.
Lightbox yang dapat di-scroll tidak diizinkan
Untuk iklan AMPHTML, lightbox yang dapat di-scroll tidak diizinkan.
Latar belakang transparan
Ketika Anda menggunakan <amp-lightbox> dalam iklan AMPHTML, latar belakang elemen <body> menjadi transparan karena AMP runtime berubah ukuran dan menyusun kembali konten materi iklan Anda sebelum lightbox diperluas. Hal ini dilakukan untuk mencegah visual "jump" (loncatan visual) materi iklan saat lightbox terbuka. Jika materi iklan Anda membutuhkan latar belakang, tetapkan nilainya pada container (seperti <div> ukuran penuh), bukan <body>.
Saat iklan AMPHTML berjalan di lingkungan pihak ketiga (misalnya dalam dokumen non-AMP), materi iklan tersebut akan ditempatkan di tengah viewport, baru kemudian diperluas. Hal ini karena iframe pihak ketiga harus mengandalkan postMessage API untuk mengaktifkan fitur seperti pengubahan ukuran bingkai, yang bersifat asinkron. Jadi, dengan mula-mula menempatkan materi iklan di tengah viewport, transisi akan berjalan lancar tanpa visual jump.
Contoh transisi dalam lightbox untuk iklan AMPHTML
Pada contoh di bawah, kami menunjukkan tampilan transisi untuk iklan AMPHTML dengan atribut animate-in="fly-in-bottom" yang ditetapkan pada elemen lightbox untuk iklan AMPHTML dalam iframe yang sesuai, dan iklan AMPHTML dalam iframe pihak ketiga.
Pada iframe yang sesuai (misalnya, yang berasal dari cache AMP)
Pada iframe pihak ketiga (misalnya, dari luar cache AMP)
Validasi
Lihat aturan amp-lightbox dalam spesifikasi validator AMP.
Anda telah membaca dokumen ini belasan kali, tetapi belum semua pertanyaan Anda terjawab? Mungkin orang lain merasakan hal yang sama. Berinteraksilah dengan mereka di Stack Overflow.
Kunjungi Stack Overflow Menemukan bug atau ada fitur yang kurang?Proyek AMP sangat menganjurkan partisipasi dan kontribusi Anda! Kami berharap Anda akan terus ambil bagian dalam komunitas sumber terbuka kami, tetapi kami juga menerima kontribusi satu kali untuk topik tertentu yang Anda minati.
Kunjungi GitHub