Gallery dan slideshow merupakan bagian dari keindahan website. Saat ini kita akan membuat gallery dan slideshow menggunakan Pikachoose. Secara coding sama, tetapi Pikachoose ini bisa kita pakai sebagai galleri maupun slideshow. Berikut akan dijelaskan langkah-langkahnya
- Silahkan download scriptnya di http://www.pikachoose.com/download/ dan install di website anda
- Include file-filenya seperti contoh berikut ini:
<title>Pikachoose </title>
<link type=”text/css” href=”pikachoose/styles/base.css” rel=”stylesheet” />
<script type=”text/javascript” src=” https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js”></script>
<script type=”text/javascript” src=”pikachoose/lib/jquery.jcarousel.min.js”></script>
<script type=”text/javascript” src=”pikachoose/lib/jquery.pikachoose.full.js”></script> - Buat coding untuk image-image yang akan dibuat slideshow/gallerinya misalnya:
<ul id=”pikame” >
<li><a href=”http://www.proweb.co.id”><img src=”pikachoose/proweb_1.jpg”/></a></li>
<li><a href=”http://www.proweb.co.id”><img src=”pikachoose/proweb_2.jpg”/></a></li>
<li><a href=”http://www.proweb.co.id”><img src=”pikachoose/proweb_3.jpg”/></a></li>
</ul> - Coding keseluruhan:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
<title>Pikachoose </title>
<link type=”text/css” href=”pikachoose/styles/base.css” rel=”stylesheet” />
<script type=”text/javascript” src=” https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js”></script>
<script type=”text/javascript” src=”pikachoose/lib/jquery.jcarousel.min.js”></script>
<script type=”text/javascript” src=”pikachoose/lib/jquery.pikachoose.full.js”></script>
<script language=”javascript”>
$(document).ready(
function (){
$(“#pikame”).PikaChoose();
});
</script></head>
<body>
<ul id=”pikame” >
<li><a href=”http://www.proweb.co.id”><img src=”pikachoose/proweb_1.jpg”/></a></li>
<li><a href=”http://www.proweb.co.id”><img src=”pikachoose/proweb_2.jpg”/></a></li>
<li><a href=”http://www.proweb.co.id”><img src=”pikachoose/proweb_3.jpg”/></a></li>
</ul></body>
</html> - Demo dapat dilihat di http://aris.proweb.asia/pikachoose.html dengan tampilan seperti gambar berikut ini:
- Informasi lebih lanjut silahkan mengunjungi http://www.pikachoose.com .
Kunjungi www.proweb.co.id untuk menambah wawasan anda.
Gallery/Slideshow dengan jQuery Pikachoose