Membuat Sliedshow Galeri dengan PHP Mysql Jquery

Publish Date : 29-09-2016 , dibaca 10237 kali, Hari ini dibaca : 2 kali ,0 comments

Tutorial kali ini kita akan Membuat Sliedshow Galeri dengan PHP Mysql dan Jquery, Jadi data gambar yang ada di database Mysql, kita tampilkan di html dengan PHP, dan kita berikan efek scroller dengan jquery, Itu lah kolaborasinya, sliedshow galeri ini biasanya kita temukan di website-website berita, atau website sekolah, pemerintahan , dan banyak lagi sih.. Nah.. Gimana tertarik membuat Sliedshow galeri seperti ini ... Ikuti langkah-langkah dibawah ini :

Gambar Sliedshow Galeri scroll dengan PHP mysql dapat di lihat pada gambar dibawah ini :

Cara Membuat Sliedshow Galeri dengan PHP mysql Jquery

Langkah-langkah:

1. Buat database dengan nama "coba" di PhpMysql, kemudian buat tabel dengan nama "gallery":

CREATE TABLE IF NOT EXISTS `gallery` (
  `id_gallery` int(3) NOT NULL auto_increment,
  `gambar` varchar(100) NOT NULL,
  `tanggal` date NOT NULL,
  `id_kategori` int(3) NOT NULL,
  `keterangan` text NOT NULL,
  PRIMARY KEY  (`id_gallery`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=21 ;

2. Buat script "koneksi.php":

<?php
$host="localhost";
$user="root";
$pass="";
$db="coba";

$koneksi=mysql_connect($host,$user,$pass);
mysql_select_db($db,$koneksi);
?>

3. gallery.php

<!---buat zoom gambarnya-->
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/jquery.bigPicture.js"></script> 
<script type="text/javascript" src="./js/jquer.bigPicture-min.js"></script> 
<script type="text/javascript" src="./js/jquery.bigPicture-pack.js"></script> 
<script type="text/javascript" src="./js/jquery.easing.js"></script>  
<link rel="stylesheet" type="text/css" href="css/core.css"/>
<link rel="stylesheet" type="text/css" href="css/skin.css"/> 


<!--buat slideshow-->
<link href="css/amazon_scroller.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript" src="js/amazon_scroller.js"></script>
<script language="javascript" type="text/javascript">

    $(function() {
        $("#amazon_scroller1").amazon_scroller({
            scroller_title_show: 'enable',
            scroller_time_interval: '4000',
            scroller_window_background_color: "#F5FFFA",
            scroller_window_padding: '10',
            scroller_border_size: '1',
            scroller_border_color: '#FAEBD7',
            scroller_images_width: '200',
            scroller_images_height: '125',
            scroller_title_size: '12',
            scroller_title_color: 'black',
            scroller_show_count: '3',
            directory: 'images'
        });
        $("#amazon_scroller2").amazon_scroller({
            scroller_title_show: 'disable',
            scroller_time_interval: '3000',
            scroller_window_background_color: "none",
            scroller_window_padding: '10',
            scroller_border_size: '0',
            scroller_border_color: '#CCC',
            scroller_images_width: '100',
            scroller_images_height: '80',
            scroller_title_size: '12',
            scroller_title_color: 'black',
            scroller_show_count: '3',
            directory: 'images'
        });
        $("#amazon_scroller3").amazon_scroller({
            scroller_title_show: 'enable',
            scroller_time_interval: '3000',
            scroller_window_background_color: "none",
            scroller_window_padding: '10',
            scroller_border_size: '2',
            scroller_border_color: '#9C6',
            scroller_images_width: '80',
            scroller_images_height: '60',
            scroller_title_size: '11',
            scroller_title_color: 'black',
            scroller_show_count: '3',
            directory: 'images'
        });
    });
</script>

<html>
<head>
    <title>Slide Gallery</title>
</head>
<body>
<div id="content">
    <p>&nbsp;</p>

    <div id="amazon_scroller1" class="amazon_scroller">
        <div class="amazon_scroller_mask">
       
            <ul>
           
            <?php
            include "./include/koneksi.php";
            $select=mysql_query("select * from gallery");
            while($row=mysql_fetch_array($select)){
                ?><li><a href="./gallery/<?php echo $row['gambar'];?>" title="<?php echo $row['keterangan'];?>" class="info" name="gambar"><img src="./gallery/<?php echo $row['gambar'];?>" width="60" height="60" title="Klik photo"/></a></li><?php           
            }
            ?>
       
            </ul>
           
        </div>
        <ul class="amazon_scroller_nav">
            <li></li>
            <li></li>
        </ul>
        <div style="clear: both"></div>
    </div>
    
    <p><i><font color="#666666" size="2" face="verdana">*Klik gambar untuk memperbesar</font></i></p>
</div>
</body></html>


<script language="javascript"> 
$('a.info').bigPicture({
  'enableInfo': true,
  'infoPosition': 'bottom'
}); 
</script>