Salam Lebaran Bersama jQuery Easing Dan Banner Rotator

Diam tak diam sembilan belas hari kita telah berpuasa. Sana sini dah mula nampak bloggers bagi ucapan Selamat Hari Raya siap decorate kad ucapan sendiri. Best gitu.

Aku tak pandai le bab-bab melukis ke, buat dekor ke. Jadi kat sini aku tempek gambar-gambar dari gugel. Hambek ko 15 keping sekali aku pos.

Kali ni slider album menggunakan jQuery Easing bersama Banner Rotator. Nah kad ucapan raya dari Empayarutama :

Salam Aidilfitri 1

Salam Aidilfitri 2

Salam Aidilfitri 3

Salam Aidilfitri 4

Salam Aidilfitri 5

Salam Aidilfitri 6

Salam Aidilfitri 7

Salam Aidilfitri 8

Salam Aidilfitri 9

Salam Aidilfitri 10

Salam Aidilfitri 11

Salam Aidilfitri 12

Salam Aidilfitri 13

Salam Aidilfitri 14

Salam Aidilfitri 15

Ambik kod kat sini:

Aku dah upgrade versi jQuery kepada jQuery 1.8.3 tetapi jika belog korang dah ada mana-mana versi; buang kod kaler merah tu. Kalau belog tak pernah ada jQuery; aku rekomen guna versi terkini agar ikut perkembangan semasa.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

<script src="http://yourjavascript.com/43361812024/empayarutamajqueryeasing.js" type="text/javascript"></script>
<script src="http://yourjavascript.com/13267823130/empayarutamajquerybannerrotator.js" type="text/javascript"></script>

<style>
.TB_Wrapper {width: 470px;height: 290px; margin-left: 5px; border: 2px solid #ddd; }
.TB_Wrapper {position: relative;overflow: hidden;}
.TB_Wrapper .Slide {visibility:hidden;background: #eee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJItCFrwwzudkLJ5s40xhpuzQr_uzhyphenhyphenRMqzy2r3cxoFgY-6UycpPD90K0J56k08mvo5m5kbGxQ5ZLa0RB6IXIOd8ffgWIocGFce5SefV-WVI60fwsiW-ZCram6sSuyJulXaiRJ1DNB3dg/s1600/preloader.gif) center center no-repeat;}
.TB_Wrapper .icon {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNXbc9s62lZfmpMxFBjjREm41U2Xj43IvO_Lqpw7wOAecdbSEVgKurygsMvI_vUAMFdwk59x3hAmU2Chp7xWcURkDX9YQnjARQqygvJJ4HI9fSfniPJTXdwAhjfksnfLu9peXpCAYC12U/s1600/icons.png);}
.TB_Wrapper .timer_sprite {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgruR5Pxxrl7_6sjXLijN6RtedIDyrWC3BK3WGWxcU8vIZU_USMT8tOEdeKu1BBvmrwMo3umhbQ1acxG-ai8fiz0PUykqTKCiNz8b3CfBo_1ZJ2YbRnP7CT1zGT1Uf26u5epj8x7EsIAxE/s1600/timer-sprite.png);}
.TB_Wrapper .Slide div {font-family: Cherry Cream Soda;font-weight:100;color:#fff;font-size:16px;}
.TB_Wrapper a:link{color:#fff;text-decoration:none;}
.TB_Wrapper a:visited{color:#fff;text-decoration:none;}
.TB_Wrapper a:hover{color:#fffcc;text-decoration:none;}
.TB_Wrapper a:active{color:#fff;text-decoration:none;}
.TB_Wrapper .noSelect {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;}
.TB_Wrapper .buttonText {font-family: Arial, Helvetica, sans-serif;font-size: 12px;font-weight: bold; color: #000;}
#slide_caption a{font-size:15px;color: red;text-decoration:none;}
#slide_caption a:hover{font-size:14px;color:#fffcc;text-decoration:none;}
</style>

<div class="TB_Wrapper" id="SlideView">
<div class="Slide" data-position="20,20" data-width="250">
<img src="link imej/gambar pertama" />
<div align="left" id="slide_caption">
<a href="link blog ke, kalau ada" target="_blank">caption/penerangan 1</a></div>
</div>
<div class="Slide" data-position="20,20" data-width="250">
<img src="link imej/gambar kedua" />
<div align="left" id="slide_caption">
<a href="link blog ke, kalau ada" target="_blank">caption/penerangan 2</a></div>
</div>
<div class="Slide" data-position="20,20" data-width="250">
<img src="link imej/gambar ketiga" />
<div align="left" id="slide_caption">
<a href="link blog ke, kalau ada" target="_blank">caption/penerangan 3</a></div>
</div>

<script type="text/javascript">
$('#SlideView').TransBanner({
button_show_back: true,
button_numbers_autohide: false,
button_numbers_horizontal: true,
caption_padding_x : 18,
caption_padding_y : 18,
caption_float_mode: true
});
</script>

Yang kaler oren tu, boleh tukar ikut kesesuaian belog. Dan aku cuma letak 3 set imej di mana set ketiga aku kalerkan pink gitu. Kalau nak tambah gambar/imej - kopipes je yang kaler pink dan tambah di bawahnya.

Sebelum masak megi buat sahur pagi nih, aku ucapkan Selamat Hari Raya Aidilfitri Maaf Zahir & Batin kepada semua yang tersinggah dan baca bahan-bahan rojak aku :)