Jimat Ruang Entri Menggunakan jQuery

Slideshow kali ini menarik juga sebab penerangan gambar berada di hadapan imej. Kita tetapkan saiz latar serta keluasan gambar dan slidenya juga ikut ketetapan masa. Maksudnya hanya guna 'timeOut'; tak leh guna 'fade', 'shuffle', 'scrollup' atau pebenda jelah.

Sebelum ni aku dah kongsi 3 jenis slider yang boleh dipapar dalam entri pos :
1. Slider Album Menerusi Picasa Sori Picasa dah tutup kedai...
2. Slider Album Menerusi jQuery Easing Dan Banner Rotator
3. Slider Album Menggunakan z-index dengan dua contoh :
` a) Penerangan gambar di bawah setiap gambar; dan
` b) Kosong tanpa penerangan gambar

Haaa meh kita cuba yang ini pula. Cubalah korang letak kod yang dalam kotak bawah ni dalam entri korang. Ini 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/91650813832/empayarutamas3slider.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
$('#haha').s3Slider({
timeOut: 5000
});
});
</script>

<style>
#haha-slider { width: 480px; height: 355px; position: relative; overflow: hidden; float: left; margin: 5px auto; margin-bottom: 20px; border: 0px solid #ddd; }
#haha-sliderContent { width: 430px; height: 350px; margin-top: -15px; position: absolute; float: left; margin-left: 5px; overflow: hidden; border: 0px solid #ddd; }
#haha-slider h3 a { color: #cc0000; text-transform: normal; font-size: 15px; } /*yang ini kalau nak letak link. Kalau tak nak biarkan saja baris ini*/
.haha-sliderImage { float: left; position: relative; display: none; width: 425px; height: 350px; border: 0px solid #ddd;}
.haha-sliderImage span { position: absolute; width: 410px; padding: 5px 10px 10px 5px; background-color: #595959; opacity:.8; filter:alpha(opacity=80); -moz-opacity:.8; -khtml-opacity:.8; color: #fff; text-transform: normal; display: none; }
.haha-sliderImage span:hover { background-color: #bbb; opacity:.8; filter:alpha(opacity=80); -moz-opacity:.8; -khtml-opacity:.8; color: #555;}
.top { top: 0; left: 0; }
.bottom { bottom: 0; left: 0; }
/* jika letak top: 0; -> kotak penerangan gambar akan keluar di bahagian atas
jika ditukar kepada bottom: 0; -> kotak penerangan gambar akan keluar di bahagian bawah
oleh itu kita letak kedua-duanya di sini dan tentukan kedudukannya dengan menambah top atau bottom pada kandungan imej */
.top p, .bottom p { text-transform: normal; font-size: 12px; }
.clear { clear: both; }
</style>

<div id="haha-slider">
<ul id="haha-sliderContent">
<li class="haha-sliderImage">
<img src="imej pertama - setting dalam style adalah 425*350 jadi biarlah sama atau lebih besar" />
<span class="top atau bottom">
<h3>
<a href="link - biasanya orang bisnes suka link nih" target="_blank">Tajuk Imej Pertama</a></h3>
'Caption' atau Penerangan untuk imej pertama</span>
</li>
<li class="haha-sliderImage">
<img src="imej kedua - setting dalam style adalah 425*350 jadi biarlah sama atau lebih besar" />
<span class="top atau bottom">
<h3>
<a href="link - biasanya orang bisnes suka link nih" target="_blank">Tajuk Imej Kedua</a></h3>
'Caption' atau Penerangan untuk imej kedua</span>
</li>
<div class="clear haha-sliderImage">
</div>
</ul>
</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)

Kalau rajin - timeOut, warna dan saiz tulisan, saiz-saiz lain boleh diejas ikut suka. Baca juga keterangan yang berwarna merah yea.

Lihat pilihan ber warna biru. Pilihle sama ada nak letak top atau bottom.

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 'Caption' atau Penerangan muncul dari bawah (7 gambar dengan timeOut 5000; sori aaaa aku guna stok gambar lama) :

• 
  
  
  

  Adriana 1

  Adriana 1
  
• 
  
  
  

  Adriana_2

  Adriana 2
  
• 
  
  
  

  Adriana_3

  Adriana 3
  
• 
  
  
  

  Adriana_4

  Adriana 4
  
• 
  
  
  

  Adriana_5

  Adriana 5
  
• 
  
  
  

  Adriana_6

  Adriana 6
  
• 
  
  
  

  Adriana_7

  Adriana 7
  

Contoh 'Caption' atau Penerangan muncul dari atas (11 gambar, timeOut aku tukar dari 5000 kepada 4000) :

• 
  
  
  

  Ekspresi - Adriana

  2 tahun setengah yang lalu
  
• 
  
  
  

  Ekspresi 1 - Asyraaf

  Ekspresi 1 - Asyraaf
  
• 
  
  
  

  Ekspresi 2 - Asyraaf

  Ekspresi 2 - Asyraaf
  
• 
  
  
  

  Ekspresi 3 - Asyraaf

  Ekspresi 3 - Asyraaf
  
• 
  
  
  

  Ekspresi 4 - Asyraaf

  Ekspresi 4 - Asyraaf
  
• 
  
  
  

  Ekspresi 5 - Asyraaf

  Ekspresi 5 - Asyraaf
  
• 
  
  
  

  Ekspresi 6 - Asyraaf

  Ekspresi 6 - Asyraaf
  
• 
  
  
  

  Ekspresi 7 - Asyraaf

  Ekspresi 7 - Asyraaf
  
• 
  
  
  

  Ekspresi 8 - Asyraaf

  Ekspresi 8 - Asyraaf
  
• 
  
  
  

  Ekspresi 9 - Asyraaf

  Ekspresi 9 - Asyraaf
  
• 
  
  
  

  Ekspresi 10 - Asyraaf

  Ekspresi 10 - Asyraaf
  

Contoh 'Caption' atau Penerangan muncul dari atas dan bawah ikut pilihan (13 gambar - timeOut aku tukar dari 5000 kepada 5500) :

• 
  
  
  

  Ekspresi A

  Ekspresi A
  
• 
  
  
  

  Ekspresi B

  Ekspresi B - 1 Malaysia?
  
• 
  
  
  

  Ekspresi C

  Ekspresi C
  
• 
  
  
  

  Ekspresi D

  Ekspresi D
  
• 
  
  
  

  Ekspresi E

  Ekspresi E - Adriana masih hisap jari...
  
• 
  
  
  

  Ekspresi F

  Ekspresi F
  
• 
  
  
  

  Ekspresi G

  Ekspresi G
  
• 
  
  
  

  Ekspresi H

  Ekspresi H
  
• 
  
  
  

  Ekspresi I

  Ekspresi I
  
• 
  
  
  

  Ekspresi J

  Ekspresi J
  
• 
  
  
  

  Ekspresi K

  Ekspresi K
  
• 
  
  
  

  Ekspresi L

  Ekspresi L
  
• 
  
  
  

  Ekspresi M

  Ekspresi M
  

Cubalah, aku try tiga-tiga kat sini ok je ^_~