CandraLab

IT Pro & Developer Resource

Menu Close

Gallery Foto dengan FancyBox dan PHP

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.

Tampilan foto dengan yang dibuat dengan fancybox

Download code
Jika anda ingin mencobanya sendiri, silahkan download scriptnya disini