contact
WA: 0822-8846-7823
SMS: 0822-8846-7823
Call: 0822-8846-7823
BBM: D7DB3491
ebsofmail@gmail.com

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 Rekomendasi



Artikel Terkait

Diskusi