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

Cara Menunda Email di Gmail Tanpa Ekstensi apa pun

Gmail baru telah diluncurkan, menghadirkan tampilan baru yang bersih. Tombol Snooze, yang sebelumnya membutuhkan ekstensi browser, sekarang tidak perlu ekstensi untuk menunda pesan email. Ini memungkinkan menghapus item pesan dari kotak masuk dalam jangka waktu tertentu, dan kemudian memunculkannya kembali di kotak masuk saat waktunya habis. Begini cara kerjanya. Aktifkan Gmail Baru Pertama harus mengaktifkan Gmail baru sebelum dapat menggunakan Tombol Snooze. Klik roda gigi pengaturan di kanan atas, lalu klik "Coba Gmail baru" atau " Try the new Gmail ". Cara Menggunakan Tombol Tunda Gmail Pada Gmail baru milik google ini tidak hanya tampilannya saja yang baru dan dan bersih tapi juga ada beberapa fitur baru salah satunya tombol Snooze atau tunda. Arahkan mouse ke pesan email yang akan di tunda dan akan melihat beberapa ikon di sebelah kanan. Ikon jam di sebelah kanan adalah tombol Snooze. Klik dan akan melihat lebih banyak opsi muncul. Pilih salah satu penawaran...
Posting Komentar
Baca selengkapnya

Cara Membuat Artikel Terkait Blogger Ringan dengan Gambar

Related Post atau artikel terkait bisa juga tergolong sebuah widget merupakan sebuah cara untuk meningkatkan visitor sekaligus memperkecil Bounce Rate di blog, cara kerjanya ialah menampilkan artikel lainnya yang berkaitan dengan label postingan dan ditampilkan dengan acak secara otomatis. Yang tentunya ini juga akan berdampak baik untuk blog di mesin pencari, utamanya google. Biasanya artikel terkait bisa berada dibawah postingan atau otomatis di tengah postingan. Bounce Rate artinya Rasio Pentalan, maksudnya pengunjung keluar dari blog tanpa melihat artikel menarik lainnya. Intinya setelah melihat satu artikel pengunjung melakukan pentalan atau keluar dari blog yang dibaca. Sebelumnya telah membuat related post untuk AMP . Lalu ada yang request related post untuk blogger Non-AMP. Cara Membuat Related post Blogger Bergambar Related post ini scriptnya hampir sama seperti yang amp. Dan juga tidak menyebabkan render-blocking JavaScript (memblokir rendering di konten) dengan atribut as...
10 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