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

1. White Carbonfiber Patter dari subtlepattern
2. Photo dari Bartek Elsner
3. Jquery
4. Jquery Lightbox

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


Oke sekian tutorial kali ini, semoga bermanfaat :)



SUMBER = http://www.tutorial-webdesign.com/membuat-popup-photo-jquery/