Do you build things with AMP? Fill out the new AMP Developer Survey!
AMP

Important: this documentation is not applicable to your currently selected format email!

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>

Untuk menampilkan gambar di lightbox, ada juga komponen <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 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

Komponen 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>.

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.

Perlu bantuan lainnya?

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