Jimat Ruang Entri Menggunakan jQueryCycle Dengan Fungsi Shuffle

Aku tertarik dengan slideshow yang disediakan Busuk.org. Baru-baru ini Busuk-org kemakini laman webnya dan banyak 'features' menarik seperti pilihan kod widget serta auto ping.

Salah satu ialah widget slideshownya. Jadi aku cuba ejas kalau kalau boleh diletakkan slide itu di dalam entri pos. Gambar sebelah takde kena mengena pun dengan cerita ni tau.

Rasanya aku pernah letak slide nih dalam kempen jimatkan air. Selain dari penggunaan marque, slider juga bantu kita jimatkan ruang jika banyak gambar/imej yang nak kita paparkan. Tapi oleh kerana blog ni banyak sangat slide atas bawah kiri kanan; aku kena sentiasa update jQuery script kepada yang terkini.

Mari lihat bagaimana rupa kodnya:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>

<script src="http://yourjavascript.com/1332412970/empayarutama-jquerycycleplugin.js" type="text/javascript"></script>

<script type='text/javascript'>
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'shuffle'
});
});
</script>

<style>
.slideshow {height:250px; width:300px; margin-left:75px;}
.slideshow img { border: 1px solid #eee; }
</style>

<div text-align="center" class="slideshow">

<div>
<img height="250px" src="imej pertama yang saiznya kalau boleh sama dengan width dan height yang berwarna pink" width="300px" />
Penerangan gambar / imej pertama</div>

<div>
<img height="250px" src="imej kedua yang saiznya kalau boleh sama dengan width dan height yang berwarna pink" width="300px" />
Penerangan gambar / imej kedua</div>

</div>
<div style="clear: both;"></div>

Skrip jQuery warna merah tak perlu jika blog korang dah ada (tak kisah apa version pun. Mungkin dah ada dalam template blog; dalam posting sebelum ini; atau di widget kat sidebar)

Yang berwarna hijau tu pula jarak imej dari tepi kiri blog. Ejas le cantik-cantik.

Boleh juga jika nak tukar fx: 'shuffle' ini kepada fx: 'fade' atau timeOut: 4000. Nombor pada timeOut adalah kelajuan slide. Lebih besar nombornya, lebih lambat slide bertukar.

Satu lagi, kalau nak guna fx: 'scrollUp' pun boleh tapi penerangan gambar tak keluar. Hanya gambar yang skrol ke atas.

Dalam kotak atas cuma ada 2 set imej, salah satunya aku tandakan dengan warna oren. Jika ada lebih gambar/imej, tambah sendiri ya. Salln je kod warna oren tu di bawahnya bergantung kepada berapa banyak imej yang korang nak letak.

Contoh bagaimana slide ini berfungsi (Arkkk border tu aku tambah kendian):

Aktiviti Akhir Bersama...

Aku Tak Mampu Menahannya

Kisah Seram UUM - The Untold Story

Koleksi Gambar Gamber Panas

Maafkan Aku Cikgu

Nanti aku kongsi slide yang lain yea :)