Membuat Slideshow Gallery gambar dengan PHP dan JQuery

Aplikasi ini adalah gabungan dari 2 aplikasi yaitu aplikasi jQuery untuk slideshow (amazon_scroller.js) dan aplikasi untuk zoom image (jquery.bigPicture.js).  aplikasi ini bertujuan untuk membantu teman-teman dalam menampilkan gambar dalam bentuk slideshow. dan ketika suatu gambar di klik dalam slideshow tadi, maka aplikasi jQuery Zoom akan memperbesar gambar dalam ukuran gambar yang asli.

Sedangkan data gallerynya di ambil dari sebuah database “test” dan nama tabelnya “tools_gallery“

Tabel "tools_gallery"

Script Include JQuery

<!—untuk zoom image–>
<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”/>

<!–untuk 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”>

Menyisipkan Syntax Javascript

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

Menampilkan gambar

<div id=”amazon_scroller1″>
<div>
<ul>
<?php
include “./include/conn.php”;
$select=mysql_query(“select * from tools_gallery”);
while($row=mysql_fetch_array($select)){
?><li><a href=”./gallery/<?php echo $row['gambar'];?>” title=”<?php echo $row['keterangan'];?>” name=”gambar”><img src=”./gallery/<?php echo $row['gambar'];?>” width=”60″ height=”60″ title=”Klik photo”/></a></li><?php
}
?>
</ul>
</div>
<ul>
<li></li>
<li></li>
</ul>
<div style=”clear: both”></div>
</div>

Download

http://www.4shared.com/file/kI8ABhIV/slideshow-gallery.html

Ri32 Network Project :

1. http://ri32-warehouse.co.cc
2. http://ri32-demo.co.cc
3. http://ri32-temanonline.co.cc

Sekian artikel dari saya, semoga bermanfaat untuk teman-teman dan anda semua…amin

Depok, 26-01-2011

noname