Cara Membuat Image Lightbox dengan Vanilla JavaScript

Image lightbox merupakan salah satu fitur yang sangat berguna, apa pun niche website Anda. Cara kerjanya cukup sederhana: ketika pembaca mengklik sebuah gambar, gambar tersebut akan muncul dalam mode pop-up, sering kali dengan latar belakang gelap untuk menonjolkan gambar tersebut.

Lalu bagaimana cara membuatnya? Di artikel ini saya akan menunjukkan cara membuat image lighbox di Hexo atau Hugo.

Cara Membuat Image Lightbox di Hexo dan Hugo

Kali ini kita tidak membuat scripts sendiri melainkan menggunakan library pihak ketiga yaitu Glightbox. Library ini saya pilih karena menggunakan vanilla JavaScript, ringan, mudah digunakan, dan hasilnya sesuai dengan yang saya perlukan. Dan semoga saja sesuai dengan yang Anda perlukan juga.

1. Masukkan kode JavaScript

   Ada beberapa pilihan untuk memasukkan kode JavaScript: NPM, download manual, dan CDN. Di tutorial ini saya akan menggunakan CDN agar bisa memanfaatkan caching.

   Masukkan link CDN di sebelum tag </body> di file layout. Tergantung konfigurasi web dan theme Anda, tetapi jika menggunakan Hexo biasanya terletak di /themes/theme-anda/layout/layout.ejs. Jika menggunakan Hugo terletak di /themes/theme-anda/layouts/default/baseof.html.

   <!-- Hugo -->
   <script src="https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"></script>
   
   <!-- Hexo -->
   <%- js('https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js') %>

   Perhatikan bahwa di Hexo saya menggunakan <%- ... %>, itu karena kita perlu menggunakan helper yang disediakan Hexo.

2. Inisiasi JavaScript

   Masih di file yang sama, inisiasi JavaScript untuk Glightbox. Di sini juga kita dapat menambahkan beberapa options. Untuk options lengkap bisa Anda lihat di dokumentasinya.

   <script type="text/javascript">
     const lightbox = GLightbox({ ...options });
   </script>

   Saya sendiri menambahkan options seperti ini:

   <script>
       const glightbox = GLightbox({
         openEffect: 'zoom',
         closeEffect: 'fade',
         cssEfects: {
           // This are some of the animations included, no need to overwrite
           fade: { in: 'fadeIn', out: 'fadeOut' },
           zoom: { in: 'zoomIn', out: 'zoomOut' }
         }
       });
     </script>

3. Tambahkan file CSS

   Langkah berikutnya kita tambahkan file CSS. Sama seperti JavaScript, saya juga akan menggunakan CDN. Di file layout yang sama, masukkan kode CSS sebelum tag </head>.

   <!-- Hugo -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" />
   
   <!-- Hexo -->
   <%- css('https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css') %>

4. Gunakan image lightbox di Markdown

   Sekarang image lightbox siap digunakan di Markdown. Kita dapat menggunakannya langsung menggunakan tag HTML seperti ini:

   <a href="large.jpg" class="glightbox">
     <img src="small.jpg" alt="image" />
   </a>

   Masukkan url image di tag <a> dan di tag img. Kita menggunakan class="glightbox" karena class inilah yang akan ditargetkan oleh file JavaScript dan CSS.

   Hasilnya akan tampil seperti ini:

   

   Tapi, untuk menghindari kesalahan penulisan sintaks atau classname, saran saya sih buat user snippet alih-alih memasukkan HTML satu per satu.

5. Menggunakan image lightbox di galeri

   Bisakah digunakan di galeri? Tentu bisa. Untuk membuat image gallery, kita perlu menggunakan tag pembungkus yang sesuai yaitu? Ya … benar, kita gunakan tag <figure>.

   <figure>
     <a href="large.jpg" class="glightbox" data-gallery="gallery1">
       <img src="small.jpg" alt="image" />
     </a>
     <a href="video.mp4" class="glightbox" data-gallery="gallery1">
       <img src="small.jpg" alt="image" />
     </a>
     <figcaption> Tambahkan caption jika perlu </figcaption>
   </figure>

   Berbeda dengan single image, untuk galeri kita perlu menambahkan data-gallery. Data ini berfungsi untuk mengumpulkan beberapa image ke dalam satu galeri. Ini karena ketika diklik dan pop up, akan ada slider dari satu image ke image berikutnya.

   Nama datanya bebas, tetapi harus sama untuk satu galeri. Gunakan nama data yang berbeda untuk galeri lainnya karena kalau tidak, nanti gambarnya tercampur.

   Tip: gunakan cara penulisan class untuk penamaan data yang terdiri dari 2 kata atau lebih. Misal: gambar-gunung, tutorial-javascript.

   Hasilnya akan tampil seperti ini:

   

   Sebagai catatan, agar galeri tampil menjadi beberapa kolom seperti contoh di artikel ini, Glightbox tidak menyediakan itu. Jadi, kita perlu mengatur CSS sendiri di elemen pembungkusnya.

Gimana, sukses membuat image lightbox-nya? Jika mengalami kendala, silakan komen atau mention saya di media sosial. Saya akan dengan senang hati membantu. (eL)