Gallery/Slideshow dengan jQuery Pikachoose

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:

sumber :http://www.proweb.co.id/articles/web_design/galleryslideshow_dengan_jquery_pikachoose.html