Bootstrap Lightbox Tutorial

Published in

Generation Girl

4 min readMar 25, 2019

Hi everyone! Back again with another cool tutorial on HTML 👋🏻

Kali ini aku mau ngasihtau gimana caranya untuk bikin galeri foto untuk website dengan menggunakan Lightbox! Untuk tutorial ini, kalian nggak cuma belajar pakai HTML tapi juga dengan Bootstrap dan jQuery!

Lightbox yang akan kita gunakan adalah Ekko Lightbox, yaitu plugin yang bisa diintegrasikan dengan Bootstrap untuk membuat galeri foto. In a nutshell, Lightbox itu sebenarnya hanya mengintegrasikan modals nya Bootstrap sehingga foto yang kalian tampilkan bisa terlihat seperti slideshow dan bisa terlihat full screen dengan mengklik fotonya.

Bootstrap Lightbox

ashleydw.github.io

Oke lanjut lagi ke tutorialnya. Nah, biasanya kita butuh apa aja sih buat bikin galeri foto?

1. Kumpulin foto yang mau kalian pasang

Galeri foto nggak bakalan oke kalo nggak ada fotonya kan? Tujuan utamanya pasti supaya orang-orang bisa liat foto yang mau kalian pamerin 😉 Untuk tutorial kali ini, kalian bisa pilih 3 foto yang kalian suka.

2. Siapin tools yang akan kamu gunakan untuk membuat websitenya

Kalian bisa pakai text-editor apapun yang biasa kalian gunakan untuk bikin website kesayangan kalian. Biasanya aku pakai Sublime Text untuk ngedit codenya. Sublime Text gratis buat didownload kok dan supported buat Windows dan Mac. Kalau kamu belum punya, klik link dibawah ini untuk download ya!

Download - Sublime Text

Sublime Text may be downloaded and evaluated for free, however a license must be purchased for continued use. There is…

www.sublimetext.com

Yuk kita mulai!

HTML

Pertama-tama, kalian buat dulu kerangka webnya di HTML. Biasanya aku lebih prefer untuk taro semua tag HTML yang diperluin dulu jadi nggak lupa buat nutup kurung setiap selesai bikin satu page. Jadi, yang kalian perlu lakukan: masukin tag <!DOCTYPE html>, <html>, <head>, dan <body>.

<head>

Disini kita akan memakai Bootstrap dan jQuery. Jadi, jangan lupa buat masukin code CDN dibawah ini di bagian <head> HTML nya ya 😊

CDN penting buat integrasi web kalian dengan berbagai macam framework dan plugin tanpa harus punya raw file nya di local machine kalian. Contohnya disini aku taruh Bootstrap 4, Ekko Lightbox, dan Bootstrap JavaScript di bagian head. Jangan lupa juga buat bikin file styles.css buat external stylesheetnya.

<body>

Sekarang saatnya buat pasang foto yang udah kalian siapin sebelumnya. Supaya rapih, kita bisa pakai Bootstrap untuk menaruh fotonya didalam grid. Pertama, kita buat <div> dulu untuk gallerynya.

<div id = "gallery">

Lalu, kita mulai bikin gridnya dengan class row dan col. Karena kita akan membagi ketiga foto ini supaya rata di satu baris, kita bisa pakai col-md-4.

Tips: Satu Bootstrap row berisi 12 cell. Angka yang kita taruh di setiap col per baris harus selalu berjumlah 12 di akhir.

<body>
      <div id = "gallery">
           <div class = "row text-center">
                  <div class = "col-md-4"></div>
                  <div class = "col-md-4"></div>
                  <div class = "col-md-4"></div>
           </div>
      </div>
</body>

Sekarang, kita bisa mulai masukin fotonya didalam col nya. Karena fotonya akan bisa di klik, kita perlu pakai tag <a> juga diantara tag <img> untuk bikin link per foto.

<a href = "[link foto]" data-toggle="lightbox" data-gallery="gallery">     <img src = "[link foto]" class = "imggallery"></a>

data-toggle nantinya berfungsi untuk code jQuerynya supaya slideshow nya muncul dari source ini. Di dalam tag img juga ada class = "imggallery” biar nanti kita bisa kontrol height fotonya supaya gambar yang muncul nggak terlalu besar di website kita.

Kalau sudah diisi semua dengan tag a dan img, code di body kalian akan terlihat seperti ini:

jQuery Script

Karena codenya hanya singkat untuk jQuerynya, kalian bisa langsung bikin inline script untuk jQuery di dalam body HTML nya.

<!-- Lightbox Script --><script>
  $(document).on("click", '[data-toggle="lightbox"]', function(event){
    event.preventDefault();
    $(this).ekkoLightbox();
  });
</script></body>

Code snippet ini berfungsi untuk memanggil function ekkoLightbox() setiap foto didalam gallery di klik. Untuk isi function ekkoLightbox nya sendiri, itu ada di dalam CDN code yang udah kita input pertama kali di bagian head 😉

CSS

Bagian CSS nya super simple kok. It’s a best practice to make CSS styling sebagai external stylesheet dibandingkan inline code. Aku udah mention sebelumnya kalau kita mau mastiin supaya tinggi gambarnya sama semua. Hal ini bisa kita atur dengan bantuan max-height untuk imagesnya.

Ini code snippetnya untuk file styles.css:

/* CSS for Lightbox */.imggallery{
    max-height: 250px;
}

And that’s it! Semua codenya tinggal kamu save dan jalanin di web browser 🎉

Overall Code

Thanks for reading through! Stay tuned buat tutorial lainnya di Generation Girl ❤️