Cara Membuat LightBox dengan Modal Bootstrap 4

13/01/2020    Risman Hakim    29     Website

Cara Membuat LightBox dengan Modal Bootstrap 4 - LightBox merupakan salah satu jenis plugin untuk menampilkan galeri gambar, popup, video ataupun konten yang lainnya dan ini menjadi plugin yang sering digunakan pada halaman website. Nah, pada kesempatan kali ini saya akan bagikan kepada kalian bagaimana Cara Membuat LightBox dengan Modal Bootstrap 4, tentu dengan komponen modal pada bootstrap kita bisa manfaatkan untuk dijadikan sebuah lightBox. Lalu bagaimana cara membuatnya.. ? Silahkan kalian bisa ikuti langkah - langkah Cara Membuat LightBox dengan Modal Bootstrap 4 berikut ini.

Sebelum membuat lightBox dengan modal pada Bootstrap, tentunya kalian wajib menyiapkan file bootstrapnya dan beberapa gambar terlebih dahulu, file bootstrap bisa kalian gunakan dengan cara online ataupun offline. Kebetulan pada kasus ini saya menggunakan file bootstrap secara online. Jika sudah kalian siapkan filenya silahkan kalian ketikan sintaknya berikut ini.

<div class="container">
  <div class="row">
    <div class="col-lg-3 col-md-4 col-xs-6 thumb">
        <a class="thumbnail"
            href="#"
            data-image-id=""
            data-toggle="modal"
            data-title=""
            data-image="img-1.jpg"
            data-target="#image-gallery">
            <img class="img-thumbnail" src="img-1.jpg" alt="Another alt text">
        </a>
    </div>
    <div class="col-lg-3 col-md-4 col-xs-6 thumb">
        <a class="thumbnail"
            href="#"
            data-image-id=""
            data-toggle="modal"
            data-title=""
            data-image="img-2.jpg"
            data-target="#image-gallery">
            <img class="img-thumbnail" src="img-2.jpg" alt="Another alt text">
        </a>
    </div>
    <div class="col-lg-3 col-md-4 col-xs-6 thumb">
        <a class="thumbnail"
            href="#"
            data-image-id=""
            data-toggle="modal"
            data-title=""
            data-image="img-3.jpg"
            data-target="#image-gallery">
            <img class="img-thumbnail" src="img-3.jpg" alt="Another alt text">
        </a>
    </div>
    <div class="col-lg-3 col-md-4 col-xs-6 thumb">
        <a class="thumbnail"
            href="#"
            data-image-id=""
            data-toggle="modal"
            data-image="img-4.jpg"
            data-target="#image-gallery">
            <img class="img-thumbnail" src="img-4.jpg" alt="Another alt text">
        </a>
    </div>
    <!-- MODAL -->
    <div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header border-bottom-0">
                    <h4 class="modal-title" id="image-gallery-title"></h4>
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
                    </button>
                </div>
                <div class="modal-body py-0">
                    <img id="image-gallery-image" class="rounded img-fluid" src="">
                </div>
                <div class="modal-footer border-top-0">
                  <p class="title-img-galeri float-left mb-0">TITLE IMAGE GALERI</p>
                  <div class="controls-galeri float-right">
                    <span id="show-next-image" class="mr-1"><i class="fas fa-chevron-left"></i></span>
                    <span id="show-prev-image" class="ml-1"><i class="fas fa-chevron-right"></i></span>
                  </div>
                </div>
            </div>
        </div>
    </div>
    <!-- END MODAL -->
  </div>
</div>

Setelah itu, tambahkan sintak CSS untuk mengatur jarak pada gambarnya.

.btn:focus, .btn:active, button:focus, button:active {
  outline: none !important;
  box-shadow: none !important;
}
#image-gallery .modal-footer{
  display: block;
}
.title-img-galeri {
  font-size: 14px;
  font-weight: bold;
}
.thumb{
  margin-top: 15px;
  margin-bottom: 15px;
}
.controls-galeri span {
  cursor: pointer;
}

Langkah terakhir, ketikan sintak jQuery berikut ini.

<script>
let modalId = $('#image-gallery');
$(document)
  .ready(function () {
    loadGallery(true, 'a.thumbnail');
    function disableButtons(counter_max, counter_current) {
      $('#show-prev-image, #show-next-image')
        .show();
      if (counter_max === counter_current) {
        $('#show-next-image')
          .hide();
      } else if (counter_current === 1) {
        $('#show-prev-image')
          .hide();
      }
    }
    function loadGallery(setIDs, setClickAttr) {
      let current_image, selector, counter = 0;
      $('#show-next-image, #show-prev-image')
        .click(function () {
          if ($(this)
            .attr('id') === 'show-prev-image') {
            current_image--;
          } else {
            current_image++;
          }
          selector = $('[data-image-id="' + current_image + '"]');
          updateGallery(selector);
        });
      function updateGallery(selector) {
        let $sel = selector;
        current_image = $sel.data('image-id');
        $('#image-gallery-title')
          .text($sel.data('title'));
        $('#image-gallery-image')
          .attr('src', $sel.data('image'));
        disableButtons(counter, $sel.data('image-id'));
      }
      if (setIDs == true) {
        $('[data-image-id]')
          .each(function () {
            counter++;
            $(this)
              .attr('data-image-id', counter);
          });
      }
      $(setClickAttr)
        .on('click', function () {
          updateGallery($(this));
        });
    }
  });
</script>

Jika sudah selesai semua sintak diatas kalian ketikan, simpan kembali filenya kemudian buka pada browser untuk melihat hasil akhirnya.
Baik, itulah tutorial sederhana bootstrap tentang bagaimana Cara Membuat LightBox dengan Modal Bootstrap 4. Semoga tutorial ini bermanfaat selamat mencoba dan sampai jumpa ditutorial selanjutya.

Bootstrap

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More