Gambar ber-lightbox juga dapat disebut image viewer. Dalam dunia blog maksudnya adalah gambar yang memiliki review dengan diikuti cahaya transparan dibelakangnya. Namun, kali ini Fajrin.web.Id akan membagikan cara membuat gambar posting lightbox di blog AMP.
Adapun syarat yang harus terpenuhi dalam menerapkan tutorial ini, yaitu:
Menggunakan Blogger Terverifikasi AMP
Mengapa demikian? Sebab, apabila blog Anda belum terverifikasi AMP, Anda tidak bisa menerapkan tutorial ini. Mengapa harus AMP? Karena, blog AMP khususnya blogger disarankan untuk mengubah versi AMP. Dengan desain AMP, kinerja blog Anda akan menjadi lebih baik. Hal tersebut sudah dijelaskan pada alamat ini:https://www.ampproject.org/id/learn/about-how/ 😎
Baca juga: Membuat Gambar Posting Blog Terverifikasi AMP
Kemudian, langsung pada tutorial membuat gambar posting lightbox di blog AMP.
1. Pasang Javascript
<script async='async' custom-element='amp-image-lightbox' src='https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js'></script>2. Pasang HTML Lightbox
<amp-image-lightbox id="lightbox1"
layout="nodisplay"></amp-image-lightbox>
<amp-img
alt="images"
on="tap:lightbox1"
role="button"
tabindex="0"
layout="responsive"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_bYnhpYAyHgUfPP8lSUziuuiBrNN6UY4ml_CzZcGMoXxEM0ty6NxTzqfLXxJngNVRIyR3PzN8D3tf_-1TCEPJwYL9KfM-GXAR4hi5xmo-dMsm-hdx7iGpMJMD06EOqilU1-yDY7dxudeH/s1600/messi+fajrin+web+id-min.jpg"
width="700"
height="393"></amp-img>3. Hasil gambar lightbox (silakan klik gambar)
Menambahkan caption pada gambar
<figure>
<amp-img on="tap:lightbox1"
role="button"
tabindex="0"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_bYnhpYAyHgUfPP8lSUziuuiBrNN6UY4ml_CzZcGMoXxEM0ty6NxTzqfLXxJngNVRIyR3PzN8D3tf_-1TCEPJwYL9KfM-GXAR4hi5xmo-dMsm-hdx7iGpMJMD06EOqilU1-yDY7dxudeH/s1600/messi+fajrin+web+id-min.jpg"
alt="Picture messi"
title="Picture lightbox messi"
layout="responsive"
width="700"
height="393"></amp-img>
<figcaption>Deskripsi singkat gambar Anda.</figcaption>
</figure><*) Tulisan bercetak tebal berwarna biru, silakan Anda ubah sesuai selera.
Bagaimana? Mudah bukan? Selamat mencoba.
Sumber: https://ampbyexample.com/components/amp-image-lightbox/