jQuery Plugin : TinySlideshow

TinySlideshow Adalah plugin jQuery dengan model slideshow atau image slider yang terdiri dari gambar utama dan gambar thumbnail. Dimana Anda dapat menggeser-geser gambar thumbnail tersebut dan memilihnya untuk ditampilkan sebagai gambar utama. Berada dibawah creative commons license plugin ini dapat Anda gunakan secara gratis dan bisa Anda dapatkan di (http://www.scriptiny.com/2008/12/javascript-slideshow/ ) . 

Lihat DEMO




Ketika sudah mendapatkan Plugin jQuery TinySlideshow Anda akan mendapatkan dua buah file javascript dan satu file CSS serta gambar-gambar ikon pendukung dan contoh gambar yang akan dibuat slideshow.

Cara menggunakannya sama halnya menggunakan plugin-plugin jQuery lainnya, kita perlu memanggil terlebih dahulu file javascript dan CSS yang dibutuhkan.

Pertama Anda memanggil file javasript (js) dan CSS dengan sintak seperti berikut.


<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="compressed.js"></script> 


Letakan script tersebut dalam tag <Head>

<ul id="slideshow">
<li>
<h3>judul1</h3>
<span>1.jpg</span>
<p>deskripsi1</p>
<a href="#"><img src="thumbnails/1.jpg" alt="Yellow Fish" /></a>
</li>
<li>
<h3>judul2</h3>
<span>2.jpg</span>
<p>deskripsi2</p>
<a href="#"><img src="thumbnails/2.jpg" alt="Squid" /></a>
</li>
<li>
<h3>judul3</h3>
<span>3.jpg</span>
<p>deskripsi3</p>
<a href="#"><img src="thumbnails/3.jpg" alt="Small Fish" /></a>
</li>

</ul>



Pada script sederhana di atas anda cukup mengganti judul, gambar, deskripsi, dan gambar thumbnail dengan yang Anda inginkan. Setelah script di atas tambahkan juga script untuk menampilkan tombol navigasi dan atributnya seperti berikut

<div id="wrapper">
<div id="fullsize">
<div id="imgprev" class="imgnav" title="Previous Image"></div>
<div id="imglink"></div>
<div id="imgnext" class="imgnav" title="Next Image"></div>
<div id="image"></div>
<div id="information">
<h3></h3>
<p></p>
</div>
</div>
<div id="thumbnails">
<div id="slideleft" title="Slide Left"></div>
<div id="slidearea">
<div id="slider"></div>
</div>
<div id="slideright" title="Slide Right"></div>
</div>
</div>


Dan juga script untuk parameternya

<script type="text/javascript">
    $('slideshow').style.display='none';
    $('wrapper').style.display='block';
    var slideshow=new TINY.slideshow("slideshow");
    window.onload=function(){
        slideshow.auto=true;
        slideshow.speed=5;
        slideshow.link="linkhover";
        slideshow.info="information";
        slideshow.thumbs="slider";
        slideshow.left="slideleft";
        slideshow.right="slideright";
        slideshow.scrollSpeed=4;
        slideshow.spacing=5;
        slideshow.active="#fff";
        slideshow.init("slideshow","image","imgprev","imgnext","imglink");
    }
</script>



Parameter di atas dapat Anda atur nilainya seperti yang Anda inginkan.


Share this

Related Posts

Previous
Next Post »

Komentar disini ..