Cara Mudah Membuat Galeri Foto Menggunakan Lightbox2



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
  1. Download terlebih dahulu lightbox2 dari situs https://lokeshdhakar.com/projects/lightbox2/
  2. Lalu extract dan ambil file js dan css yang terdapat pada folder dist, kemudian copykan file – file yang ada ke project masing – masing
  3. Siapkan beberapa gambar dan taruh pada folder project kalian masing - masing
  4. Buat halaman HTML, dan  selanjutnya kalian tinggal panggil file js dan css lightbox
  5. 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


Related Posts :

13 Responses to "Cara Mudah Membuat Galeri Foto Menggunakan Lightbox2"

  1. Mantap sekali tutorialnya kang, nanti saya coba praktek kan caranya.

    ReplyDelete
  2. kayaknya menarik dan perlu dicoba juga ini mas. saya langsung meluncur sambil nyoba dulu. makasih infonya kang

    ReplyDelete
    Replies
    1. semoga bermanfaat bagi yg mencoba, kalo gagal marahin aja kang adminnya ya

      Delete
  3. amp bisa make lightbox teu nya ahh, asa hoream ngoprek na ge ayeunamah wkwkwk

    ReplyDelete
  4. Penggunaan lightbox sepertinya sangat cocok untuk blog fotografi ya mas

    ReplyDelete
  5. Kalau sudah tentang script js dan CSS saya nyerah aja udah pusing duluan..

    ReplyDelete
  6. Lightbox emang wajib dipakai mas buat di website dan blog, biar ga hambar wahahaha..

    ReplyDelete
  7. Penasaran
    Langsung kupraktekkan
    Hasil galeri menyenangkan

    ReplyDelete
  8. Nyimak aja dulu ah, kapan-kapan saja nyoba belajar

    ReplyDelete
  9. Waahh!! Keren nih mas bisa saya coba untuk sekedar belajar dunia photograpi..Meski bukan ahli dunia photo memoto..😄😄

    ReplyDelete
  10. Wahhh mantep nih jadi designer blogger wuehehe, programmingny handal bangett

    ReplyDelete
  11. lighbox bagus nih kalau blgonya tentang makanan, travelling or fotograpi,

    ReplyDelete
  12. Ternyata simpel bangeutt ya. Nanti pankapan praktekk ahh

    ReplyDelete

Silahkan untuk meninggalkan komentar, santai saja dan mulailah berkomentar...