Untuk mempercantik tampilan awal gunakan code css berikut ini, sedangkan untuk popup lightbox tidak perlu dirubah, kecuali jika diinginkan dan diperlukan.
body{background:url('../images/white_carbonfiber.png');}
section{width:672px;margin:20px auto;background:rgba(255,255,255,.3)}
#gallery{padding:10px}
#gallery ul{
list-style-type:none;
}
#gallery ul li{
display:inline-block;
padding:5px;
}
#gallery ul li img:hover{
opacity:0.8;
}
Untuk hasilnya yaitu gambar yang membesar ketika di klik, silahkan lihat demo dan download source code nya untuk mempelajari lebih lengkap bagaimana penempatan file nya.
Oke sekian tutorial kali ini
Jangan lupa follow twitter kami di @tut_web untuk mendapatkan info terbaru dunia web design & development
Salam web design Indonesia.
[…] Pada artikel ini kami akan tunjukan cara paling mudah membuat halaman gallery untuk website anda, apa yang kita buat ini bisa juga digabung dengan teknik yang ada di tutorial kami sebelumnya yaitu Membuat Popup Image Gallery Dengan Jquery dan HTML5. […]
folder galery sama content yang maw saya kasi image foldernya beda, apa ada pengaruhnya ya.? web yang saya bikin belum saya upload, masih di local host… yang laennya bisa koq, cuma tombol navigasinya aja yang ga keliatan. maklum saya masih newbie, perlu banyak bimbingan, makasi sbelumnya :D
Kemungkinan terbesar, kamu hanya salah dalam menentukan lokasi file gambar yang berkaitan dengan tombol Next, Previews & Close.
Coba download lagi contohnya dan pelajari dengan teliti :)
mas, tlg di posting juga utk php script utk mengupload (add, edit, delete photo), stelah di upload, ukuran photo di konversi ke ukuran yg sesuai dgn ukuran photo di folder thumbnail dan tersimpan di folder thumbnail tsb. Jadi nti script phpnya berhubungan dengan postingan mas yg sekarang ini.
itu request saya mas…klo sudah di posting request sy, mohon kirim file lengkapnya ke email sy. terima kasih
Oh, normalize di Demo nya ya? Iya buat template untuk demo menggunakan normalize.css, tapi dalam demo itu tidak terpakai jadi kami hapus :) tapi lupa di hapus di css nya, jadi tetap di include, hapus saja :)
mau tanya kenapa kok tombol navigasinya tidak muncul kalau file htmlnya kita masukkan dalam folder (i.e. folder galeri) padahal kalau di root folder bisa muncul.. (semua file untuk navigasi sudah disimpan di folder images)
terima kasih..
sudah saya cek di css tidak ada url yang ngerujuk ke file gambar navigasi..
(ternyata urlnya ada di file jquery.lightbox-0.5.min.js).
Terima kasih untuk tutorialnya.. sekarang sudah bisa :)
mas, saya coba aplikasikan popup image diatas dengan slider dari flexslider 2, tp ketika file jquery.js saya include kan slider saya jadi ga muncul. padahal direktori js antar slider sudah saya pisahkan. kira-kira masalahnya dimana ya?
maksudnya dobel gimana ya mas? dari bawaan slider cuman ada jquery.flexslider.js sama scripts.js apa jquery.flexslider.js sama jquery.js dari script diatas itu tabrakan? terus kira2 solusinya gimana mas biar bisa jalan semua dalam satu page? Maaf banyak tanya, baru belajar jadi banyak penasaran dan gak ngertinya :D
ya jquery.js nya 1 aja, trus coba pindah, yang duluan dipanggil yang punya flexslider atau yang popup ini, atau coba cek variable nya apakah ada yang sama di javascript nya. Gak nyobain soalnya, jadi gak bisa bantu banyak
nanti mudah2an sempat membuat tulisan tentang gallery dengan database, pada intinya tinggal query aja gambar2 dari database lalu ikuti struktur html di contoh ini
[…] Pada artikel ini kami akan tunjukan cara paling mudah membuat halaman gallery untuk website anda, apa yang kita buat ini bisa juga digabung dengan teknik yang ada di tutorial kami sebelumnya yaitu Membuat Popup Image Gallery Dengan Jquery dan HTML5. […]
maw nanya, tombol close, next dan lain-lain (tombol navigasinya) koq ga bisa muncul ya bli.? suksma infonya.
Di demo bisa kok, coba di baca lagi dengan teliti mungkin ada yang tertinggal, atau mungkin kesalahan PATH (Lokasi file).
Periksa kembali
folder galery sama content yang maw saya kasi image foldernya beda, apa ada pengaruhnya ya.? web yang saya bikin belum saya upload, masih di local host… yang laennya bisa koq, cuma tombol navigasinya aja yang ga keliatan. maklum saya masih newbie, perlu banyak bimbingan, makasi sbelumnya :D
Kemungkinan terbesar, kamu hanya salah dalam menentukan lokasi file gambar yang berkaitan dengan tombol Next, Previews & Close.
Coba download lagi contohnya dan pelajari dengan teliti :)
mantep gan dah bisa.. thanks infonya. sukses buat WD .. maju terus :D
mas, tlg di posting juga utk php script utk mengupload (add, edit, delete photo), stelah di upload, ukuran photo di konversi ke ukuran yg sesuai dgn ukuran photo di folder thumbnail dan tersimpan di folder thumbnail tsb. Jadi nti script phpnya berhubungan dengan postingan mas yg sekarang ini.
itu request saya mas…klo sudah di posting request sy, mohon kirim file lengkapnya ke email sy. terima kasih
setuju sama atas ane.. jadi kalo mau nambah foto harus manual dong yah? kalo banyak bisa cape donk
minta saran donk min :D
Ini kan tutorial untuk desainnya, kalau mau dipakai ya sesuaikan dengan websitenya masing2..
Untuk PHP mungkin nanti akan dibahas kalo ada waktunya :)
mav mas, mau tanya apa ini bs dipake di android?
Belum pernah nyoba, tapi kayaknya kurang efektif :)
Coba ini buat pertimbangan : http://www.youtube.com/watch?v=ieQwtQiZ4C8
gan.. koq normalize.css nya gak ditemukan ..
Oh, normalize di Demo nya ya? Iya buat template untuk demo menggunakan normalize.css, tapi dalam demo itu tidak terpakai jadi kami hapus :) tapi lupa di hapus di css nya, jadi tetap di include, hapus saja :)
berhasil! thanks :D
Very nice :)
terima kasih
thank you gan………. berhasil banget, dengan edit sana sini akhirnya ku dapat yang kumau….TOP
mau tanya kenapa kok tombol navigasinya tidak muncul kalau file htmlnya kita masukkan dalam folder (i.e. folder galeri) padahal kalau di root folder bisa muncul.. (semua file untuk navigasi sudah disimpan di folder images)
terima kasih..
Harus disesuaikan di cssnya, soalnya settingan gambar2 untuk panah navigasi itu ditentukan di css
sudah saya cek di css tidak ada url yang ngerujuk ke file gambar navigasi..
(ternyata urlnya ada di file jquery.lightbox-0.5.min.js).
Terima kasih untuk tutorialnya.. sekarang sudah bisa :)
mas, saya coba aplikasikan popup image diatas dengan slider dari flexslider 2, tp ketika file jquery.js saya include kan slider saya jadi ga muncul. padahal direktori js antar slider sudah saya pisahkan. kira-kira masalahnya dimana ya?
jquery nya cukup satu saja, jangan sampe double.
maksudnya dobel gimana ya mas? dari bawaan slider cuman ada jquery.flexslider.js sama scripts.js apa jquery.flexslider.js sama jquery.js dari script diatas itu tabrakan? terus kira2 solusinya gimana mas biar bisa jalan semua dalam satu page? Maaf banyak tanya, baru belajar jadi banyak penasaran dan gak ngertinya :D
ya jquery.js nya 1 aja, trus coba pindah, yang duluan dipanggil yang punya flexslider atau yang popup ini, atau coba cek variable nya apakah ada yang sama di javascript nya. Gak nyobain soalnya, jadi gak bisa bantu banyak
#gallery a dalam
$(function() {$(‘#gallery a’).lightBox();});
itu apanya yah? tolong beri penjelasannya saya masih newbie
#gallery disitu maksudnya untuk menargetkan
div id="gallery"yang ada di html nya.jadi #gallery a, berarti yang jadi target adalah link yang ada didalam
div id="gallery"kira-kira begitu
mas klo slaid sama pop up gmbarnya di ambil dri databse gmna mas, tlong jlasin..
nanti mudah2an sempat membuat tulisan tentang gallery dengan database, pada intinya tinggal query aja gambar2 dari database lalu ikuti struktur html di contoh ini
mas kalau dikonversi ke codeigniter bisa gak mas?
bisa
gan biar gambar popup nya bisa responsif gmn gan?
kang mau tanya nih, kalo popup untuk gallery video ada g?
Sejauh ini belum pernah buat tutorial tentang itu
Agar pop up imagenya responsive gimana?
mas, kalo input image nya otomatis bisa ga mas? misalnya memanfaat kan Json script atau API?
ijin pakai ya master…hehehe
Kalau Ngatur ukuran foto pas di popup gimana ?
Add/Edit CSS nya, seperti bagian ID #lightbox-container-image{}
Silahkan di explore sendiri..
Mas link downloadya rusak