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 src="fb/jquery.js" type="text/javascript"></script>
    <link href="fb/jquery.fancybox.css?v=2.1.0" media="screen" rel="stylesheet" type="text/css"></link>
    <script src="fb/jquery.fancybox.pack.js?v=2.1.0" type="text/javascript"></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</body></html>
    <a class=""fancybox"" data-fancybox-group=""gallery"" href="https://www.blogger.com/%22foto/gambar1.png%22"> <img alt="""" class=""img-polaroid"" height=""150"" src=""foto/gambar1.png"" width=""150"" /> </a>
     
    <a class=""fancybox"" data-fancybox-group=""gallery"" href="https://www.blogger.com/%22foto/gambar2.jpg%22"> <img alt="""" class=""img-polaroid"" height=""150"" src=""foto/gambar2.jpg"" width=""150"" /> </a>
     
    <a class=""fancybox"" data-fancybox-group=""gallery"" href="https://www.blogger.com/%22foto/gambar3.jpg%22"> <img alt="""" class=""img-polaroid"" height=""150"" src=""foto/gambar3.jpg"" width=""150"" /> </a>
     
    <a class=""fancybox"" data-fancybox-group=""gallery"" href="https://www.blogger.com/%22foto/gambar4.jpg%22"> <img alt="""" class=""img-polaroid"" height=""150"" src=""foto/gambar4.jpg"" width=""150"" /> </a>
      <br />

-->

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>

    <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() {
  /*
   *  Simple image gallery. Uses default settings
   */     
$('.fancybox').fancybox();
      });
</script>
  </head>
  <body>
    <h2>
 File hasil upload foto</h2>

    <?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)){
    ?>

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

Semoga Artikel Ini bermanfaat

Gallery Foto dengan FancyBox dan PHP

Sabtu, 23 Agustus 2014 | 0 komentar

Tidak ada komentar:

Posting Komentar

Sahabat Anda Menuju baitullah

Apa yang anda Cari

Entri Populer

Garuda

Donasi

Sahabat Brigration

Seputar Pendidikan

Virus Merah Jambu