Cara Membuat Lightbox AMP dengan Fitur Galeri

Dalam memposting konten banyak yang menggunakan gambar supaya lebih menarik. Atau mungkin menggunakan media gambar sebagai media untuk mempermudah dalam memahami isi artikel. Serta, mungkin juga sebagai media Galery.

Seringkali banyak pengunjung blog yang mempratinjau atau memperbesar gambar agar terlihat lebih jelas, terutama gambar yang memiliki bagian-bagian yang detail. Sehingga mereka harus membuka gambar di tab .

Dengan menggunakan alat lightbox gambar dapat diperbesar. Ada banyak tutorial untuk membuat lightbox non-amp dan banyak juga plugin untuk membuat lightbox.

Di amp project ada tiga jenis komponen lightbox, diantaranya:

amp-lightbox, menampilkan elemen html dengan layar penuh.
amp-image-lightbox, menampilkan efek lightbox untuk gambar yang telah ditentukan.
amp-lightbox-gallery, menampilkan gambar dalam mode galery lightbox. Pengguna dapat beriteraksi untuk melihat-lihat gambar dengan lebih nyaman.

Di sini akan membahas tutorial membuat lightbox menggunakan amp-lightbox-gallery. Kenapa memilih amp-lightbox-gallery, karena penggunaannya yang mudah dan tidak ribet, serta terdapat beberapa fitur bagus.

Langkah awal pasang script amp-lightbox-gallery.

Active Select All

<script async='async' custom-element='amp-lightbox-gallery' src='https://cdn.ampproject.org/v0/amp-lightbox-gallery-0.1.js'></script>

Pastikan bahwa gambar yang di upload untuk dijasikan lightbox memiliki resolusi yang tinggi. lalu buat gambar pada postingan supaya valid amp (mengubah img menjadi amp-img) yang sudah di bahas dalam blog ini.

Cara Menggunakan Amp Lightbox Gallery

Pada postingan, masuk mode HTML setelah itu cari elemen amp-img (yang dijadikan lightbox), supaya ketika gambar dalam keadaan besar nanti tidak kabur maka atur parameter url terlebih dahulu.

Pada parameter scale atau S[angka] ubah menjadi s0 untuk ukuran asli atau s1600 untuk maksimal 1600px. Lalu pada elemen tersebut tambahkan atribut lightbox. Contoh:

<div class="separator">
 <amp-img lightbox alt="Menu AMP Lightbox gallery" data-original-height="654" data-original-width="1360" height="306" layout="intrinsic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFx5tVYMGMxU6ggqqWi4z5xs6V75y4LVaV_bIk1B95SqrU9iOlEt9QMLMUToMrnL0x6zF3q3gNpzMSw7yQeJZ4vC66T37E-vv9_frI-NppnHgfzVsOPrn09urLOF1jgjrlrqi2jzR0XL8/s0/Lightbox%2BGaleri.png" title="Menu AMP Lightbox gallery" width="640"></amp-img>
</div>

Pertinjau/review dulu, untuk mengecek apakah berfungsi. Pada halaman pratinjau coba klik gambar yang telah dijadikan lightbox. Jika berhasil maka akan muncul lightbox.

Membuat Galeri Lightbox

Selanjutnya cara membuat lightbox galery. Jika di postingan disematkan beberapa gambar, kamu dapat membuat galeri di postingan.

Pada media gambar yang lain atur dengan cara yang sama seperti di atas, ubah parameter scale url dan tambahkan atribut lightbox pada amp-img.

<div class="separator">
 <amp-img lightbox alt="AMP Lightbox gambar" data-original-height="654" data-original-width="1360" height="306" layout="intrinsic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8W9vkmL7gEy7ydNCXaA9K_fe64Qv4AWTi51Zx4Ou7iueN-Y2I5tDaZSvOAQu6ulzDs-4XMqDW622cw7liOuQW1zUcWXn4Fc1pcvXme2m1eU0VJa1lV8qw4Ot-2updIYf6USZMo07HS7Y/s0/AMP%2BLightbox.png" title="AMP Lightbox gambar" width="640"></amp-img>
</div>
<p>paragraf 1</p>
<div class="separator">
 <amp-img lightbox alt="Menu AMP Lightbox gallery" data-original-height="654" data-original-width="1360" height="306" layout="intrinsic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFx5tVYMGMxU6ggqqWi4z5xs6V75y4LVaV_bIk1B95SqrU9iOlEt9QMLMUToMrnL0x6zF3q3gNpzMSw7yQeJZ4vC66T37E-vv9_frI-NppnHgfzVsOPrn09urLOF1jgjrlrqi2jzR0XL8/s0/Lightbox%2BGaleri.png" title="Menu AMP Lightbox gallery" width="640"></amp-img>
</div>
<p>paragraf 2</p>
<!-- dan seterusnya -->

Nanti secara otomatis script amp akan membuat lightbox. Ketika klik klik (buka) salah satu gambar, nanti akan muncul lightbox gambar tersebut dan bisa di geser kanan kiri untuk beralih ke gambar yang lain. Serta ada tombol menu daftar gambar pada galeri di kanan atas.

Perlu di ingat, jika kamu menggunakan amp-img dengan fitur fallback akan ada masalah. Biasanya fitur fallback ini digunakan untuk menggunakan gambar Webp.

Saat elemen amp-img dan fallback-nya terdapat atribut lightbox, pada galery kedua gambar tersebut akan muncul. Dan jika fallback tidak aktif gambarnya akan ter-hidden.

Jadi lebih baik jangan gunakan fallback untuk gambar yang ingin dibuat lightbox.

Membuat Lebih dari Satu Lightbox

Tidak hanya itu saja komponen amp lightbox gallery juga bisa digunakan untuk membuat beberapa grup lightbox yang berbeda. Kamu cukup membuat berbeda isi dari atribut lightbox.

Contoh pada gambar grup pertama kamu menggunakan atribut lightbox="grub1" untuk seluruh gambar yang akan ditampilkan pada grup pertama. lalu pada grub kedua kamu menggunakan atrinut lightbox="grub2".untuk seluruh gambar yang akan ditampilkan pada grup kedua.

<div class="separator">
 <amp-img lightbox alt="Surat PIN adsense" data-original-height="961" data-original-width="1600" height="384" layout="intrinsic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisCeuWOfGGATuWCHhPs71hjs9CpT_KB-1bh2HhQCqiyBGUMm3t3BrqeeU1KPzo-SLxehXHIP5Cfov3LMkRLfry-FgViejqVk8cY77b7xE6ZQGExjHNdNaBd0MipjD3yuTdun6TypXR8m0/s0/Surat+PIN+adsense+%25283%2529.jpg" title="Surat PIN adsense" width="640"></amp-img>
</div>
<p>paragraf 1</p>
<div class="separator">
 <amp-img lightbox alt="Surat PIN adsense" data-original-height="961" data-original-width="1600" height="384" layout="intrinsic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFgl-UJTKOmuMGv7-g5eu4Qfs1FZES5-oSSBDXpyras8CvyRCNoBSRMagDk5A4HIg6-ULgb6WSuM4YAiM8JfdOgQTRGnitoIRK45MlF1wnVuTmUMqWp1Wrfhd-xMSZuGCoP-ZswngyUoQ/s0/Surat+PIN+adsense+%25282%2529.jpg" title="Surat PIN adsense" width="640"></amp-img>
</div>
<p>paragraf 2</p>
<!-- dan seterusnya --> 
<div class="separator">
 <amp-img lightbox="adsense" alt="Surat PIN adsense" data-original-height="961" data-original-width="1600" height="384" layout="intrinsic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisCeuWOfGGATuWCHhPs71hjs9CpT_KB-1bh2HhQCqiyBGUMm3t3BrqeeU1KPzo-SLxehXHIP5Cfov3LMkRLfry-FgViejqVk8cY77b7xE6ZQGExjHNdNaBd0MipjD3yuTdun6TypXR8m0/s0/Surat+PIN+adsense+%25283%2529.jpg" title="Surat PIN adsense" width="640"></amp-img>
</div><p>paragraf 1</p>
<div class="separator">
 <amp-img lightbox="adsense" alt="Surat PIN adsense" data-original-height="961" data-original-width="1600" height="384" layout="intrinsic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFgl-UJTKOmuMGv7-g5eu4Qfs1FZES5-oSSBDXpyras8CvyRCNoBSRMagDk5A4HIg6-ULgb6WSuM4YAiM8JfdOgQTRGnitoIRK45MlF1wnVuTmUMqWp1Wrfhd-xMSZuGCoP-ZswngyUoQ/s0/Surat+PIN+adsense+%25282%2529.jpg" title="Surat PIN adsense" width="640"></amp-img>
</div><p>paragraf 2</p>
<!-- dan seterusnya -->

Intinya isi dari atribut lightbox harus berbeda untuk setiap grup. Bisa juga untuk lighbox pertama tidak di isi.

Menampilkan satu gambar saja untuk membuka galeri

Atau hanya ingin menampilkan satu gambar saja di artikel, tetapi saat dibuka lightbox-nya menampilkan banyak gambar. Caranya sama saja, kamu hanya perlu menyembunyikan gambar yang tidak ditampilkan.

Setelah memberi atribut lightbox pada semua gambar. Kamu buat elemen <span class="overlay-text">Lihat Galeri Foto</span> di dalam media gambar yang ditampilkan. Lalu buat tag div dan beri atribut hidden. Dan taruh gambar yang tidak ingin ditampilkan ke dalam elemen div. Contoh seperti ini:

<div class="separator">
 <amp-img lightbox="adsense" alt="Surat PIN adsense" data-original-height="961" data-original-width="1600" height="384" layout="intrinsic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyYbXOIRuNGyGahT_nafS3CVosJH_oCLAEZ83pr3uAkSkm_YPmiS9kmcdX0W7VJqkbV5x7_w9N8rJCOjEWk1_u-BFXWAgz4oZaeTFHcrlVAXfDwHNwRnbHjPqzRIPtf2gXxCNy033E5Hk/s0/Surat+PIN+adsense+%25281%2529.jpg" title="Surat PIN adsense" width="640">
 <span class="overlay-text">Lihat Galeri Foto</span> </amp-img>
 <div hidden>
 <amp-img lightbox="adsense" alt="Surat PIN adsense" data-original-height="961" data-original-width="1600" height="384" layout="intrinsic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisCeuWOfGGATuWCHhPs71hjs9CpT_KB-1bh2HhQCqiyBGUMm3t3BrqeeU1KPzo-SLxehXHIP5Cfov3LMkRLfry-FgViejqVk8cY77b7xE6ZQGExjHNdNaBd0MipjD3yuTdun6TypXR8m0/s0/Surat+PIN+adsense+%25283%2529.jpg" title="Surat PIN adsense" width="640"></amp-img>
 <amp-img lightbox="adsense" alt="Surat PIN adsense" data-original-height="961" data-original-width="1600" height="384" layout="intrinsic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFgl-UJTKOmuMGv7-g5eu4Qfs1FZES5-oSSBDXpyras8CvyRCNoBSRMagDk5A4HIg6-ULgb6WSuM4YAiM8JfdOgQTRGnitoIRK45MlF1wnVuTmUMqWp1Wrfhd-xMSZuGCoP-ZswngyUoQ/s0/Surat+PIN+adsense+%25282%2529.jpg" title="Surat PIN adsense" width="640"></amp-img>
 </div>
</div>

Penting jangan lupa simpan css berikut untuk mengatur posisi teks "Lihat Galeri Foto".

.overlay-text{position:absolute;bottom:20px;left:20px;z-index:1;pointer-events:none;background-color:rgba(0,0,0,.3);color:#fff;padding:5px
 15px;border-radius:2px;font-size:1em}

Menambahkan Deskripsi Pada Gambar Lightbox

Tidak hanya dapat menampilkan gambar saja pada lightbox. Gambar juga dapat diberi deskripsi, yang nanti deskripsi itu akan muncul di bagian bawah gambar.

Ada dua cara yang dapat di coba, menggunakan figcaption dan aria-describedby.

Menggunakan figcaption

Figcaption adalah elemen anakan dari figure, artinya figure dan figcaption iatu satu rangkaian. Buat rangkaian figure terlebih dulu kemudian taruh media gambar dan buat deskripsinya pada figcaption. Contoh:

<figure class="separator">
 <amp-img lightbox="adsense" alt="Surat PIN adsense" data-original-height="961" data-original-width="1600" height="384" layout="intrinsic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyYbXOIRuNGyGahT_nafS3CVosJH_oCLAEZ83pr3uAkSkm_YPmiS9kmcdX0W7VJqkbV5x7_w9N8rJCOjEWk1_u-BFXWAgz4oZaeTFHcrlVAXfDwHNwRnbHjPqzRIPtf2gXxCNy033E5Hk/s0/Surat+PIN+adsense+%25281%2529.jpg" title="Surat PIN adsense" width="640">
 <figcaption>
 Surat PIN adsense
 </figcaption>
</figure>

Menggunakan aria-describedby

Aria-describedby merupakan sebuah atribut, yang nantinya digunakan untuk memanggil teks dari elemen lain. Untuk menggunakannya tambahkan atribut aria-describedby="" ke elemen amp-img dan buat elemen div (lalu diberi atribut id="").

Kemudian isi elemen div dengan deskripsi gambar, dan isi atribut aria-describedby dan id dengan isi yang sama. Contoh:

<div class="separator">
 <amp-img lightbox="adsense" aria-describedby="pin-adsense" alt="Surat PIN adsense" data-original-height="961" data-original-width="1600" height="384" layout="intrinsic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyYbXOIRuNGyGahT_nafS3CVosJH_oCLAEZ83pr3uAkSkm_YPmiS9kmcdX0W7VJqkbV5x7_w9N8rJCOjEWk1_u-BFXWAgz4oZaeTFHcrlVAXfDwHNwRnbHjPqzRIPtf2gXxCNy033E5Hk/s0/Surat+PIN+adsense+%25281%2529.jpg" title="Surat PIN adsense" width="640">
</div>
<div id="pin-adsense">Pin Adsense adalah ....</div>

ManKoin

Cari Blog Ini