Menggunakan Lightbox untuk Bootstrap 5 pada Blogger

Pada postingan kali ini kita akan melanjutkan perubahan atau modifikasi template Blogger dengan menggunakan Lightbox yang dibuat menggunakan Bootstrap 5 pada website Blogger ini. Karena template yang digunakan ini benar-benar dari dasar, sehingga fitur Lightbox bawaan Blogger tidak berjalan. Sehingga setiap kita klik gambar pada postingan akan langsung ditautkan dan dibuka sesuai dengan url atau alamat gambar tersebut. Secara umum lightbox disini adalah menampilkan gambar atau video dengan mengisi layar dan meredupkan sisi halaman web menggunakan Javascript library. Berguna untuk mempercantik tampilan web dan berinteraksi terhadap penggunanya. Maka berikut ini cara agar bisa menggunakan Lightbox pada blog ini.

Disini kita menggunakan bantuan utiliti plugin atau library Lightbox for Bootstrap 5 berdasarkan kelas komponen Modal dan Carousel yang dikembangkan oleh trvswgnr.

Instalasi

Kita gunakan CDN dan letakan script berikut ini setelah script Bootstrap pada bagian akhir sebelum tag </body>.

<script src="https://cdn.jsdelivr.net/npm/bs5-lightbox@1.8.3/dist/index.bundle.min.js"></script>

Penggunaan

Setalah menambahkan script diatas, utiliti ini akan otomatis bisa digunakan bersama plugin bootstrap 5 dengan cara menambahkan atribut data-toggle="lightbox" pada elemen gambar atau video dengan memberikan atribut tersebut pada elemen <a> yang membungkus elemen <img>.

<a href="https://i.postimg.cc/25RTDTKV/Joe-Right-logo-black.png" data-toggle="lightbox">
	<img src="https://i.postimg.cc/25RTDTKV/Joe-Right-logo-black.png">
</a>

Pilihan

Memberikan Caption

Untuk memberikan caption, yaitu dengan menambahkan atribut data-caption atau data-footer.

Menampilkan Gallery

Untuk menampilkan gallery, yaitu dengan menambahkan atribut data-gallery, sehingga gambar atau video yang ada pada halaman web dapat dilihat pada Lightbox dengan tampilan Carousel dengan memilih ke kanan dan ke kiri.

Memberikan Type

Jika tautan konten tidak ada ektensi, perlu menambahkan atribut data-type yang berisi ['image', 'youtube', 'vimeo', 'instagram', 'video', 'url', 'html'] untuk menjelaskan jenis ekstensinya.

Contoh

Penggunaan pada halaman web

Pada gambar sebelumnya telah dicontohkan penggunaannya, berikutnya kita tambahkan pilihan atribut pada gambar yang akan ditampilkan. Pada setiap membuat halaman web atau misalnya membuat postingan, kita berikan atribut tersebut pada elemen gambar atau video yang ingin ditampilkan pada Lightbox. Berikut ini contoh penggunaan Lightbox yang diaplikasikan di blog ini, silahkan klik gambar ini:

Berikut ini kode yang digunakan:

<div class="row row-cols-lg-4 row-cols-md-3 row-cols-sm-2 row-cols-1">
  <div class="col my-3 ">
    <a href="https://drive.google.com/thumbnail?id=1_B2Bx703DReNIqQz_euAvkgqtR8HfVR9&sz=w768" data-toggle="lightbox" data-caption="indoor unit" data-gallery="mygallery" data-type="image">
      <img src="https://drive.google.com/thumbnail?id=1_B2Bx703DReNIqQz_euAvkgqtR8HfVR9&sz=w300" alt="indoor unit"  class="rounded mx-auto d-block center-cropped">
    </a>
  </div>
  <div class="col my-3">
    <a href="https://drive.google.com/thumbnail?id=1_G5p_WpJ9H9JX_7Clyoe743iq5WNtojQ&sz=h1200" data-toggle="lightbox" data-caption="outdoor unit" data-gallery="mygallery" data-type="image">
      <img src="https://drive.google.com/thumbnail?id=1_G5p_WpJ9H9JX_7Clyoe743iq5WNtojQ&sz=w300" alt="outdoor unit" class="rounded mx-auto d-block center-cropped">
    </a>
  </div>
</div>

Tambahan

Thumbnail

Pada kode tersebut ditambahkan kelas center-cropped untuk Crop dan Center gambar secara otomatis menggunakan CSS yang tidak terdapat pada Bootstrap maupun utilitas Lightbox. Kelas ini dibuat untuk membuat gambar thumbnail yang responisve terhadap media query.

Berikut ini kode yang digunakannya:

/* Media Query */
  /* Phone */
  @media (max-width: 575.98px) { 
    .center-cropped {
      object-fit:cover;
      object-position:center; 
      height: 300px; 
      width: 300px;
    }
  }
  /* Tablet */
  @media (min-width: 576px) {
    .center-cropped {
      object-fit:cover;
      object-position:center; 
      height: 210px; 
      width: 210px;
    }
  }
  /* Laptop */
  @media (min-width: 768px) {
    .center-cropped {
      object-fit:cover;
      object-position:center; 
      height: 220px; 
      width: 220px;
    }
  }
  /* Extra Large */
  @media (min-width: 992px) {
    .center-cropped {
      object-fit:cover;
      object-position:center; 
      height: 230px; 
      width: 230px;
    }
  }

Informasi lebih lanjut bisa kunjungi cara Crop and Center Images Automatically.

Menambahkan Javascript

Pada pembahasan diatas dituliskan cara menggunakan library lightbox yang diaplikasikan pada halaman web atau hanya pada postingan saja. Bagaimana dengan gambar yang belum kita buat atribut data-toggle="lightbox" pada postingan sebelumnya? Disini kita akan menambahkan script mencarikan gambar pada section atau elemen article agar dibuka pada lightbox, tanpa harus merubah setiap postingan yang sudah kita buat sebelumnya.

Kita simpan kode dibawah ini sebelum script Library Lightbox yang sebelumnya telah kita pasang. Berikut ini kodenya:

// Mendapatkan semua elemen <article> dalam dokumen
  var articles = document.getElementsByTagName('article');

  // Loop melalui setiap elemen <article>
  for (var i = 0; i < articles.length; i++) {
    var article = articles[i];
    
    // Mencari semua elemen <img> dalam elemen <article> saat ini
    var imagesInArticle = article.getElementsByTagName('img');
    
    // Loop melalui setiap elemen gambar dalam elemen <article>
    for (var j = 0; j < imagesInArticle.length; j++) {
      var img = imagesInArticle[j];
      var parentLink = img.parentNode; // Mendapatkan elemen <a> yang mengelilingi gambar

      // Memeriksa apakah parentLink adalah elemen <a>
      if (parentLink.tagName === 'A') {
        parentLink.setAttribute('data-toggle', 'lightbox');
        parentLink.setAttribute('data-gallery', 'mygallery');
        parentLink.setAttribute('data-type', 'image');

        // Menambahkan atribut data-caption dengan nilai dari atribut alt elemen img
        var altText = img.getAttribute('alt');
        if (altText) {
          parentLink.setAttribute('data-caption', altText);
        }
      }
    }
  }

Sehingga saat ini kita bisa klik gambar pada postingan dan akan dibuka menggunakan lightbox baik secara manual pada postingan maupun otomatis menggunakan script.