Langsung ke konten utama

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:

  1. amp-lightbox, menampilkan elemen html dengan layar penuh.
  2. amp-image-lightbox, menampilkan efek lightbox untuk gambar yang telah ditentukan.
  3. 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.

Terkait: Cara Mengatur Gambar AMP di Postingan supaya Responsive.

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>
Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Mengatasi Item Data Terstruktur Hilang atau Tidak Valid pada Blog AMP

Sekarang Google memfokuskan konten dengan blog AMP pada pencarian mobile. Salah satunya dengan adanya validasi data terstruktur pada pengujian AMP milik google. Yang tidak valid akan ada " Missing or invalid structured data item " di bagian bawah, bagi yang akun google-nya di setting bahasa indonesia maka akan menggunakan peringatan "Item data terstruktur hilang atau tidak valid". Tapi ketika di cek di pengujian data terstruktur tidak ada error sama sekali. Setelah saya amati ternyata ada yang salah dalam penempatan schema, yang tentunya tidak sesuai pedoman. Tapi bagi yang sering berkunjung di blog kompi ajaib milik kang adhy akan mendapatkan penyelesaian masalah seputar blog. Salah satu contohnya yang dibahas di posting ini. Di blog kompi ajaib dalam Memperbaiki Item Data Terstruktur yang tidak valid menggunakan cara yang agak rumit, lalu bagaimana bagi yang belum terlalu paham dengan kode HTML. Tidak harus mengubah semua struktur data, seperti pada tutorial komp...
9 komentar
Baca selengkapnya

Melihat Perangkat yang Terhubung ke Jaringan Wi-Fi

Apakah jaringan atau Wi-Fi Anda berjalan lambat? Banyak perangkat dan aplikasi yang berbeda terhubung ke jaringan, dan hanya perlu satu perangkat atau aplikasi tersembunyi untuk memperlambat jaringan.Gunakan GlassWire untuk Melihat Aplikasi dan Perangkat Apa yang Memperlambat Jaringan Anda. Pertama instal aplikasi GlassWire untuk Windows . Setelah menginstal dan terbuka GlassWire klik tab "Things" untuk melihat daftar semua perangkat yang saat ini ada di jaringan. Kemudian dapat menuju ke menu GlassWire kiri atas dan pilih "Settings" kemudian klik "Security", lalu klik "Unlock" dan kemudian di bawahnya pilih "Things monitor" (yang paling atas). Sekarang centang kotak yang mengatakan " Notify me about network device activity " dan pilih " Report only new unknown devices ". GlassWire kemudian akan memberi tahu kapan saja perangkat baru yang tidak dikenal bergabung dengan jaringan. Lihat Apa yang Terhubung ke PC Secara ...
Posting Komentar
Baca selengkapnya

Apa itu Timeline di Windows 10, apa Fungsi dan Penggunannya

Timeline adalah bagian dari Task view Windows 10. Ini menunjukkan riwayat aktivitas yang telah dilakukan dan bahkan dapat menyinkronkan aktivitas di seluruh PC. Fitur ini tersedia di Windows 10's April 2018 Update. Ini juga dapat bekerja dengan aplikasi seluler yang di kaitkan dengan akun Microsoft, sehingga ketika melihat dokumen Word di iPhone atau ponsel Android maka akan muncul di Timeline pada PC. Cara Membuka Timeline Untuk membuka Task View, klik ikon "Task View" di taskbar sebelah kanan kotak Cortana. Jiak tidak ada mungkin pernah menyembunyikannya, unttuk menampilkan kembali, klik kanan taskbar dan klik "Show Task View Button". Task View juga dapat dibuka dengan menekan Windows + Tab pada keyboard Anda. Timeline muncul di jendela yang sedang terbuka. Gulir ke bawah untuk melihat daftar aktivitas baru-baru ini. Bilah gulir di sisi kanan memungkinkan untuk menggulung kembali hari-hari sebelumnya. Aktivitas yang yang ditampilkan tidak semuanya, hanya aplik...
Posting Komentar
Baca selengkapnya