Gallery Foto dengan FancyBox dan PHP

Tampilan foto dengan  yang dibuat dengan fancybox

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

Author: Candra Adi Putra

Candra Adi Putra adalah Alumni STMIK AKAKOM Yogyakarta. Like Candralab Studio Di Facebook.

11 thoughts on “Gallery Foto dengan FancyBox dan PHP”

    1. 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=”” />

  1. terimakasih ilmunya mas, kalau mau ngasih keterangan dari gambar ketika gambar uda dklik biar ada keterangan dbawah gambar gtu bisa gag mas?

    1. 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

Tinggalin komentar dong!