Jquery Gallery & Slide : 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/) .
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.
Sumber : Klik disini
Tidak ada komentar