Rabu, 17 November 2010

I Finally Got Slider/Slideshow for My Heading :P

Sekian lama mengobak-ngabik web, ternyata ketemu juga nich sob Image slider/slideshow jQuery plugin. Maksudnya ketemu yg cocok dipasang di blog aku Beben si bloglang ganteng kalem tea :)) =)) Selayang pandang mengenai image slidehow/slider yaitu, image yg silih berganti dengan lembutnya diatur dengan irama agar terlihat gaya dengan menggunakan jQuery script :D ;)) Pada sesi ini, aku tidak akan menerangkan bagaimana cara memasang di template blog sobat. Tinggal mengikuti langkah² yg sudah ada saja kok sob :-bd Dua metode ini paling simpel ditemukan disinih sob:
  1. SohTanaka
  2. Jon Raasch's Blog
  3. jQuery Banner Rotator Tergaya
Silahkan dipilih mana yg menurut sobat paling mudah dipakainya. Untuk sobat Ardhiansyam http://www.berandabumi.co.cc/ yg aku tengok suka mengulik-ngulik jQuery juga, dan dia berkata pada balasan komentar aku diblognya
Segera dipublikasikan sob, biar ga penasaran
Here's bro cekgidot buka web keren berikut http://www.claudiowebdesign.it/ ► Klik kategori Blog ► Cari postingan dg judul "New jQuery Plugin: Spiral animations" Happy jQuery brooo \m/ and see yah :-h

jQuery plug-in slideshow terpendek kayaknya mah ini nih (http://snook.ca/) ;)) :D

jQuery Plug-in

<script type='text/javascript'>
jQuery(function(){
jQuery('.fadein img:gt(0)').hide();
setInterval(function(){
jQuery('.fadein :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('.fadein');},
3000);
});
</script>

Kode CSS

.fadein{position:relative;height:120px}
.fadein img{position:absolute; left:0; top:0}

Kode HTML

<div class="fadein">
<img alt='' src='http://your-link-image1.jpg'/>
<img alt='' src='http://your-link-image2.jpg'/>
<img alt='' src='http://your-link-image3.jpg'/>
<img alt='' src='http://your-link-image4.jpg'/>
<img alt='' src='http://your-link-image5.jpg'/>
<img alt='' src='http://your-link-image6.jpg'/>
</div>

Tidak ada komentar:

Posting Komentar