Mempercantik Gambar Dengan Fancybox

Apa itu fancybox?? Fancybox adalah plugin jQurey yang di pakai untuk membuat gallery foto menjadi lebih cantik dengan cara pop up yang keren. Sebenarnya Fancybox juga bisa di gunakan untuk mempercantik video, text dan komponen lain di sebuah halaman website, namun kali ini yang akan kita bahas untuk penggunaan pada image / gambar. versi yang saya pakai adalah versi 2.1 untuk versi terakhir bisa anda download di situs resminya

sebelum mulai siapkan file-file sebagai berikut :
1. folder fancybox yang didalamnya sudah terdapat file-file jQuery
2. folder foto yang didalamnya berisi file-file foto yang akan kita load

jika semua file sudah siap, mari kita lakukan pembahasan
Langkah Pertama :
Letakan semua folder tadi dalam 1 folder.
Langkah Kedua :
Buatlah file bernama index.html

Letaknya kurang lebih seperti di gambar berikut

Langkah Ketiga :
Edit dengan notepad file index.html
ketikan kode berikut ini :

<html>
<head>
<!-- langkah 1) incude semua script dan CSS yang dipakai oleh fancybox-->
<script type="text/javascript" src="fancybox/jquery.js"></script>
<link rel="stylesheet" href="fancybox/jquery.fancybox.css?v=2.1.0" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/jquery.fancybox.pack.js?v=2.1.0"></script>
<script type="text/javascript">
$(document).ready(function() {
<!-- langkah 2) inisilasisasi fancybox Simple image gallery. Uses default settings -->
$('.fancybox').fancybox();
});
</script>
</head>
<body>
<h2> DEMO FANCYBOX</h2>
<!-- langkah 3). script untukmenampilkan gallery, disini kita menampilkan 4 foto, perhatikan letak folder foto-->
<a class="fancybox" href='foto/gambar1.jpg' data-fancybox-group="gallery" > <img class="img-polaroid" src='foto/gambar1.jpg' width='150' height='350' alt="" /> </a>
<a class="fancybox" href='foto/gambar2.jpg' data-fancybox-group="gallery" > <img class="img-polaroid" src='foto/gambar2.jpg' width='150' height='350' alt="" /> </a>
<a class="fancybox" href='foto/gambar3.jpg' data-fancybox-group="gallery" > <img class="img-polaroid" src='foto/gambar3.jpg' width='150' height='350' alt="" /> </a> 
<a class="fancybox" href='foto/gambar4.jpg' data-fancybox-group="gallery" > <img class="img-polaroid" src='foto/gambar4.jpg' width='150' height='350' alt="" /> </a>
<a class="fancybox" href='foto/gambar5.jpg' data-fancybox-group="gallery" > <img class="img-polaroid" src='foto/gambar5.jpg' width='150' height='350' alt="" /> </a>
</body>
</html>

setelah jadi hasilnya seperti ini