Fancybox adalah plugin jQuery yang dipakai untuk membuat gallery Foto menjadi lebih cantik. Sebenarnya Fancybox juga bisa digunakan untuk menampilkan Video, text dan komponen lain disebuah halaman,namun dalam pembahasan kali ini, saya fokus untuk membuat gallery foto. Versi fancybox yang saya pakai adalah versi 2.1.
Tutorial ini merupakan kelanjutan dari tutorial sebelumnya yang membahas tentang upload gambar, jadi sebaiknya anda merujuk ke artikel tersebut untuk masalah koneksi database dan tabel foto yang nantinya akan digunakan di sini. Namun bagi anda yang ingin membuat gallery foto statis tanpa berurusan dengan PHP MySQL, anda bisa mencobanya dengan script dibawah ini. script ini cocok untuk membuat gallery image static.
langkah membuat fancybox tanpa PHP dan MYSQL (Static page)
langkahnya sebagai berikut
1. Include file jquery, jquery.fancybox.pack.js serta jquery.fancybox.css di header halaman.
2. Buat script Fancybox di header untuk membaut gallery.
3. Tampilkan file gambar thumbnail dengan kelas CSS class=”fancybox”
<html>
<head>
<! langkah
1).-- incude semua script dan CSS yang dipakai oleh fancybox-->
<script type="text/javascript" src="fb/jquery.js"></script>
<link rel="stylesheet" href="fb/jquery.fancybox.css?v=2.1.0"
type="text/css" media="screen" />
<script type="text/javascript"
src="fb/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> File hasil upload foto</h2>
<!-- langkah 3). script untukmenampilkan gallery,
disini kita menampilkan 4 foto, perhatikan letak folder foto-->
<a class="fancybox" href='foto/gambar1.png'
data-fancybox-group="gallery" > <img class="img-polaroid"
src='foto/gambar1.png'
width='150' height='150' alt="" /> </a>
<a class="fancybox" href='foto/gambar2.jpg'
data-fancybox-group="gallery" > <img class="img-polaroid"
src='foto/gambar2.jpg'
width='150' height='150' alt="" /> </a>
<a class="fancybox" href='foto/gambar3.jpg'
data-fancybox-group="gallery" > <img class="img-polaroid"
src='foto/gambar3.jpg'
width='150' height='150' alt="" /> </a>
<a class="fancybox" href='foto/gambar4.jpg'
data-fancybox-group="gallery" > <img class="img-polaroid"
src='foto/gambar4.jpg'
width='150' height='150' alt="" /> </a>
</body>
</html>
Langkah untuk membuat fancybox yang mengambil file gambar dari MySQL adalah sebagai berikut
1. Include file jquery, jquery.fancybox.pack.js serta jquery.fancybox.css di header
2. Buat script inisialisasi Fancybox di header untuk membaut gallery.
3. Ambil data gambar dari mySQL dengan PHP.
4. Tampilkan file gambar thumbnail dengan kelas CSS class=”fancybox”.
<html>
<head>
<!-- langkah 1. Include file jquery, jquery.fancybox.pack.js
serta jquery.fancybox.css di header halaman.-->
<script type="text/javascript" src="fb/jquery.js"></script>
<link rel="stylesheet" href="fb/jquery.fancybox.css?v=2.1.0"
type="text/css" media="screen" />
<script type="text/javascript"
src="fb/jquery.fancybox.pack.js?v=2.1.0"></script>
<!-- langkah 2 Buat script Fancybox di header untuk membaut gallery. -->
<script type="text/javascript">$(document).ready(function() {
/*
* Simple image gallery. Uses default settings
*/
$('.fancybox').fancybox();
});
</script>
</head>
<body>
<h2> File hasil upload foto</h2>
<!-- langkah 3) Ambil data gambar dari mySQL dengan PHP-->
<?php
require_once ('koneksi.php');
$query="SELECT * from foto ";
$result=mysql_query($query) or die(mysql_error());
$no=1;
//proses menampilkan data
while($rows=mysql_fetch_object($result)){
?>
<!-- langkah 4).
Tampilkan file gambar thumbnail dengan kelas CSS class="fancybox" -->
<a class="fancybox" href='foto/<?=$rows -> nama_file;?>'
data-fancybox-group="gallery" > <img class="img-polaroid"
src='foto/<?=$rows -> nama_file;?>'
width='150' height='150' alt="" /> </a>
<?php
}?>
</body>
</html>
Kalau diperhatikan, langkah yang berbeda ada di cuma di nomor 3 dan 4. Asal anda tahu konsepnya, insyaallah baik membuat gallery statis atau dinamis mudah dengan fancybox.
berikut ini adalah gambaran foto jika di klik.
Download code
Jika anda ingin mencobanya sendiri, silahkan download scriptnya disini
coba bikin tutorilial yang bisa berelasi antar beberapa tabel bos
untuk file foto_view.php nya tidak tampak gambar yg di uploadnya
trims
ganti setiap <? dengan <?php
hemm..tetep gakbisa gan..memang yg bermasalah dibagian ini
<a class="fancybox" href="./foto/nama_file;?>”
data-fancybox-group=”gallery” ><img class="img-polaroid"
src="./foto/ nama_file;?>”
width=’150′ height=’150′ alt=”” />
Mantep mas, saya coba berhasil
klo di tambah di blog bisa ga ya??
Langsung bisa Mas tapi kalau mau ditambahkan watermark gimana caranya ya, terima kasih atas sharenya.
wah tutorial yang menarik saya sangat suka, trm kasih… http://www.idebesar.com
maav mas tanya nii error pada line 25 coneksi php maksudnya apa iia
terimakasih ilmunya mas, kalau mau ngasih keterangan dari gambar ketika gambar uda dklik biar ada keterangan dbawah gambar gtu bisa gag mas?
kang puten kenapa ya kok gak bisa jalan nih malah dapet error 403 acces denied kang
terima ksh ats ilmunya mas, btw fotonya ko gak bsa preview dlm bntuk fancybox nya yah? mohon bantuannya? apa salah directory fb? tp sya udh cek ko..?
terima ksh :)
biasanya kamu salah path fancyboxnya,
coba buka lewat google chrome, terus kamu buka javascript konsole lewat tool->javascript console
nah ada merahnya ga? kalo ada merahnya biasanya ada error di javascript.
cara kedua, view source,
nah terus kan ada tuh link link ke javacript, kamu klik aja linknya kalau error berarti kamu salah menempatkan javascriptnya