Cara Mudah Membuat Galeri Foto Menggunakan Lightbox2
Web Programming,Website Edit
 |
| 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 simpel
Mantap sekali tutorialnya kang, nanti saya coba praktek kan caranya.
ReplyDeletekayaknya menarik dan perlu dicoba juga ini mas. saya langsung meluncur sambil nyoba dulu. makasih infonya kang
ReplyDeletesemoga bermanfaat bagi yg mencoba, kalo gagal marahin aja kang adminnya ya
Deleteamp bisa make lightbox teu nya ahh, asa hoream ngoprek na ge ayeunamah wkwkwk
ReplyDeletePenggunaan lightbox sepertinya sangat cocok untuk blog fotografi ya mas
ReplyDeleteKalau sudah tentang script js dan CSS saya nyerah aja udah pusing duluan..
ReplyDeleteLightbox emang wajib dipakai mas buat di website dan blog, biar ga hambar wahahaha..
ReplyDeletePenasaran
ReplyDeleteLangsung kupraktekkan
Hasil galeri menyenangkan
Nyimak aja dulu ah, kapan-kapan saja nyoba belajar
ReplyDeleteWaahh!! Keren nih mas bisa saya coba untuk sekedar belajar dunia photograpi..Meski bukan ahli dunia photo memoto..😄😄
ReplyDeleteWahhh mantep nih jadi designer blogger wuehehe, programmingny handal bangett
ReplyDeletelighbox bagus nih kalau blgonya tentang makanan, travelling or fotograpi,
ReplyDeleteTernyata simpel bangeutt ya. Nanti pankapan praktekk ahh
ReplyDeleteTerima kasih yaa utk tutorialnya...sangat bagus dan bermanfaat banget buat saya
ReplyDelete