contact

Contact Person
Pin BB : 5AB31960
SMS : 082288467823
WA : 081275371724
call : 081275668074

Membuat Sliedshow Galeri dengan PHP Mysql Jquery

Posted in Javascript Jquery Life at 29 September 2016 With 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 :

▼ Download Source Code Dibawah Ini ▼


membuat sliedshow galeri dengan php

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>

Nah.. Untuk source Code lengkapnya silahkan di download disini

Artikel Terkait

Diskusi