Membuat Image Lightbox Di Blog Amp

Membuat Image Lightbox Di Blog AMP - Image Lightbox yaitu saat sebuah gambar di postingan di klik, maka akan muncul sebuah overlay yang menampilkan gambar yang lebih besar.

Sebenarnya Blogger sendiri sudah mempunyai fitur lightbox dan kita dapat mengaktifkannya pada setting di dashboard Blogger. Namun bagi Anda yang sudah melaksanakan validasi AMP maka Anda tidak dapat memakai fitur lightbox Blogger tersebut.

Namun tidak perlu khawatir, disini Saya akan mencoba membagikan artikel Membuat Image Lightbox Di Blog AMP, memakai js amp-image-lighbox.

Jika teman blogger ingin menciptakan image lightbox di blog amp sobat, ikuti langkahnya dibawah ini.

Silahkan simpan js amp-image-lightbox di bawah ini diatas instruksi </head>

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

Kemudian untuk menghasilkan gambar lighbox, gunakan html menyerupai dibawah ini.

 <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/AVvXsEi9bMSxJZM4jUAP6LglFLYSRqNaPIGsYOOkP3zj6FCLOBK38fyjBnHwpSRxm4zIKAdFvtd1wOFHp477yTpu6PvHnpmxqCJdcVorEk4E344X8o5fuU-rtlPjnkbhrhJjUpnqjVWJfAwZPzk/s1600/membuat-image-light-box-amp.png"
width="750"
height="450"></amp-img>
Maka kesudahannya menyerupai dibawah ini, coba teman klik pada gambar dibawah ini.

Bagaimana berdasarkan teman blogger, cukup gampang bukan? Semoga bermanfaat.

Share this Article