Selamat Datang

Membuat Popup Image Gallery Dengan Jquery dan HTML5

Image Popup atau Photo Popup yaitu gambar gambar yang akan menampilkan ukuran yang lebih besar jika salah satu gambar thumbnail nya di klik.

Beberapa hari yang lalu ada seorang follower di twitter yang menanyakan tentang cara membuat gambar popup untuk gallery website.

Untuk itu kita akan mencoba membuatkan nya, lengkap dengan bahan dan cara singkatnya :)

Ingredients

Bahan-bahan yang kita perlukan adalah :
*Kayak mau masak :)

Untuk penempatan file silahkan download file yang telah kami sediakan dibagian akhir artikel ini

Code HTML (index.html)

Berikut ini kode HTML untuk bagian [head] [/head]

	<link rel="stylesheet" type="text/css" href="css/twd-base.css" />	
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/jquery.lightbox-0.5.min.js"></script>
	<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
	
	<script type="text/javascript">
	$(function() {
		$('#gallery a').lightBox();
	});
	</script>

Bagian ini digunakan mengaktifkan Jquery Lightbox dengan target ID #gallery

	<script type="text/javascript">
	$(function() {
		$('#gallery a').lightBox();
	});
	</script>

Code untuk BODY [body] [/body]

		<section>

			<div id="gallery">
				<ul>
					<li>
						<a href="photo/1.jpg" title="Satu">
							<img src="photo/thumb/1.jpg" alt="tutorial web design" />
						</a>
					</li>
					<li>
						<a href="photo/2.jpg" title="Dua">
							<img src="photo/thumb/2.jpg" alt="tutorial web design" />
						</a>
					</li>
					<li>
						<a href="photo/3.jpg" title="Tiga">
							<img src="photo/thumb/3.jpg" alt="tutorial web design"/>
						</a>
					</li>
					<li>
						<a href="photo/4.jpg" title="Empat">
							<img src="photo/thumb/4.jpg" alt="tutorial web design" />
						</a>
					</li>
					<li>
						<a href="photo/5.jpg" title="Lima">
							<img src="photo/thumb/5.jpg" alt="tutorial web design" />
						</a>
					</li>
					<li>
						<a href="photo/6.jpg" title="Lima">
							<img src="photo/thumb/6.jpg" alt="tutorial web design" />
						</a>
					</li>
					<li>
						<a href="photo/7.jpg" title="Lima">
							<img src="photo/thumb/7.jpg" alt="tutorial web design" />
						</a>
					</li>
					<li>
						<a href="photo/8.jpg" title="Lima">
							<img src="photo/thumb/8.jpg" alt="tutorial web design" />
						</a>
					</li>
				</ul>
			</div>
		
		</section>

Code CSS (css/style.css)

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.





Comments

38 thoughts on “Membuat Popup Image Gallery Dengan Jquery dan HTML5

  1. […] 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. […]

  2. budi says:

    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

      • budi says:

        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 :)

  3. budi says:

    mantep gan dah bisa.. thanks infonya. sukses buat WD .. maju terus :D

  4. morganvortex says:

    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

  5. upreal says:

    mav mas, mau tanya apa ini bs dipake di android?

  6. oryza says:

    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 :)

  7. gujunpyo says:

    berhasil! thanks :D

  8. Rohmat Purwoko says:

    terima kasih

  9. Bowo Sujarwo says:

    thank you gan………. berhasil banget, dengan edit sana sini akhirnya ku dapat yang kumau….TOP

  10. Rizki says:

    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..

  11. Rizki says:

    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 :)

  12. hapit says:

    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.

      • hapit says:

        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

  13. abdul says:

    #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

  14. aceng says:

    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

  15. hima says:

    mas kalau dikonversi ke codeigniter bisa gak mas?

  16. gan biar gambar popup nya bisa responsif gmn gan?

  17. tajul says:

    kang mau tanya nih, kalo popup untuk gallery video ada g?

  18. Kevin Adam says:

    Agar pop up imagenya responsive gimana?

  19. Bahril Ilmi says:

    mas, kalo input image nya otomatis bisa ga mas? misalnya memanfaat kan Json script atau API?

  20. Iqbal says:

    ijin pakai ya master…hehehe

  21. Irfan says:

    Kalau Ngatur ukuran foto pas di popup gimana ?

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development