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 :)
White Carbonfiber Patter dari subtlepattern
Photo dari Bartek Elsner
Jquery
Jquery Lightbox
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.
Selamat Mencoba
0 komentar:
Post a Comment