Kunsus berbagi: Membuat slide gambar gallery MySql sederhana

kali ini saya akan memberikan sedikit tutorial slide gambar dengan gallery yang tersimpan pada MySql yang saya temukan pada waktu googling dan sudah sedikit saya modif agar lebih dimengerti.... let's go....

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 pemanggilnya "gallery.php", dab jangan lupa koneksi databasenya "koneksi.php":

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

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

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

3. tutor ini dilengkapi beberapa file pendukung dan bisa didownload disini!

Trims, dan selamat belajar!!!

10 komentar:

IPTEK DAN IMTAQ2 Agustus 2013 pukul 19.40
mohon izin belajar galerinya
BalasHapus
Balasan
ardiansyah23 Agustus 2013 pukul 23.37
makasih om :)
BalasHapus
Balasan
Morten17 September 2013 pukul 03.49
thank you gan...
jangan lupa kunjungi
www.newbiepc.blogspot.com
BalasHapus
Balasan
Titikputih_8914 Desember 2013 pukul 22.33
Terimakasih Mas :-)
ikut belajar
BalasHapus
Balasan
Unknown13 Januari 2014 pukul 18.47
misi gan,,boleh ane nanya ga?
kebetulan ane lagi buat slideshow berita tuh kayak detik.com
pas udah beres manggil gmbr ma keterangannya, ane mau klik/a href ke detailnya nih tp kepentot ma idnya gara2 script di atas ga nge-post si id...kira2 gmn yah?
mohon pencerahannya suhu.

thnx
BalasHapus
Balasan
fery.sagogo25 Maret 2014 pukul 00.18
misi gan,,,,file di 4shared nya ....kosong..ihik..tolong diupload lg ya gan...
BalasHapus
Balasan
Anonim21 Januari 2015 pukul 01.07
gan cara upload foto yang lainnya ke database gmna? makasih gan sebelumnya, sangat membantu.
BalasHapus
Balasan
Unknown21 Mei 2015 pukul 17.01
Mas cara menambah slide-shownya lagi gimana ? Itu kan hanya 1 slide-show . Mohon pencerahannya :)
BalasHapus
Balasan

Tambahkan komentar

Kamis, 14 Februari 2013

Membuat slide gambar gallery MySql sederhana

10 komentar: