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

Tags:

12 thought on “Gallery Foto dengan FancyBox dan PHP”

  1. putra setia says:

    coba bikin tutorilial yang bisa berelasi antar beberapa tabel bos

  2. adhofar says:

    untuk file foto_view.php nya tidak tampak gambar yg di uploadnya
    trims

    1. ganti setiap <? dengan <?php

    2. adhofar says:

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

  3. Mantep mas, saya coba berhasil
    klo di tambah di blog bisa ga ya??

  4. kastam says:

    Langsung bisa Mas tapi kalau mau ditambahkan watermark gimana caranya ya, terima kasih atas sharenya.

  5. udin says:

    wah tutorial yang menarik saya sangat suka, trm kasih… http://www.idebesar.com

  6. bebe says:

    maav mas tanya nii error pada line 25 coneksi php maksudnya apa iia

  7. vivi says:

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

  8. Anonymous says:

    kang puten kenapa ya kok gak bisa jalan nih malah dapet error 403 acces denied kang

  9. 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 :)

    1. Candra Adi Putra says:

      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

Tinggalkan Komentar plz!