Cara Mudah Membuat Galeri Foto Menggunakan Lightbox2

Contoh foto yang menggunakan Lightbox2. Root93 Blogs

ROOT93 - Halaman galeri foto pada sebuah website terkadang memang diperlukan juga oleh karena itu pada kesempatan ini saya akan coba menjelaskan bagaimana cara termudah membuat halaman galeri di website menggunakan plugins. Membuat halaman galeri foto di website menggunakan lightbox2 ini memang relatif lebih mudah, karena kita hanya cukup memanggil properti di lightbox ke halaman project atau web yang sedang kita kerjakan. Untuk detail instalasi atau konfigurasinya bisa kalian lihat di situs :
Dalam percobaan kali ini kebetulan saya menggunakan boostrap, jadi intinya lightbox ini nanti ditampilkannya pada halaman website boostrap. Dan berikut ini adalah Cara Mudah Membuat Galeri Foto Menggunakan Lightbox2

Download terlebih dahulu lightbox2 dari situs https://lokeshdhakar.com/projects/lightbox2/
Lalu extract dan ambil file js dan css yang terdapat pada folder dist, kemudian copykan file – file yang ada ke project masing – masing
Siapkan beberapa gambar dan taruh pada folder project kalian masing - masing
Buat halaman HTML, dan selanjutnya kalian tinggal panggil file js dan css lightbox

Didalam file HTML/Boostrap, nanti untuk memanggil fotonya kurang lebih seperti berikut ini

<div class="row" style="margin-top: 20px;">
    <div class="col-sm-6 col-md-4 grid-costum">
      <a href="../ro-content/gambar_1.jpg" data-lightbox="mygallery" data-title="gambar 1"><img class="img-responsive" src="../ro-content/gambar_1.jpg" alt="Image Test"></a>
    </div>

    <div class="col-sm-6 col-md-4 grid-costum">
      <a href="../ro-content/gambar_2.jpg" data-lightbox="mygallery" data-title="gambar 2"><img class="img-responsive" src="../ro-content/gambar_2.jpg" alt="Image Test"></a>
    </div>
    

    <div class="col-sm-6 col-md-4 grid-costum">
      <a href="../ro-content/gambar_3.jpg" data-lightbox="mygallery" data-title="gambar 3"><img class="img-responsive" src="../ro-content/gambar_3.jpg" alt="Image Test"></a>
    </div>
    
    <!--next grid -->
    
    
 </div>

Jika tombol/properti next, preview atau tombol close tidak tersedia saat gambar/foto di klik, Anda bisa menyalin file properti tersebut ke project kalian dari folder image lightbox yang sudah di download sebelumnya . Selanjutnya nanti kalian bisa buka file lightbox.min.cs dan arahkan propertinya ke direktori image yang sesuai.

Video Membuat Galeri Foto Menggunakan Lightbox2

Ahmad Zaelani

Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simple