◄ Min  Size Fonts: + | - | ± Color: Max ►

Small and Simple Slideshow jQuery

Sobat mungkin sudah tidak asing dengan feature slider/slideshow :-? Yes, yang suka gonta-ganti itu tuh macam gak disuruh-suruh tapi bisa ganti sendiri. Kalau di blog aku ini ada pada home page bertitle Headlines :-" Slider/Slideshow ini banyak macamnya sob, ampe puyeung @-) Coba sekarang sobat ketikan di box search dengan keyword "jQuery slider" bakal kebuka seabrek-abrek dah. Itulah slider sob namanya ;)) :)) b-) Bloglang ganteng kalem ini berhasil menemukan slider simpel banget dengan plug-in jQuery WebDezine. Dipostingan tersebut sudah dipaparkan secara rinci bagaimana membuat small and simple jQuery slideshow :)

Karena awal ketertarikan dimulai dari http://www.hacktweak.co.cc melihat ada yg gonta-ganti sendiri dan ternyata itu terakreditasikan dengan FeedBurner. Perhatikan sidebar kanan atasnya sob (jika blon dirubah sih) ;)) Itu yg mau Beben bagi buat para sobat dan followerku tercinta :x oke oke oke :)>- Jika sobat enggak mau capek ya tinggal ambil saja kode Headline Animator pada halaman feedburner sobat :)) Jadi deh slideshow no cape-cape!!! Langsung deh yuk kita buat bagaimana versi pluginnya [..]
DashboardDesignPage ElementsAdd a GadgetHTML/Javascript
Masukan deh ini bumbu-bumbunya...

<div id="slide-show">

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

<script type="text/javascript">
var x = 2;
function slideSwitch() {
x += 1;
if (x > 5) {
x = 1
}
$("#slide-show .feedburnerFeedBlock ul li:nth-child(n)").animate({opacity:0});
$("#slide-show .feedburnerFeedBlock ul li:nth-child(" + (x) + ")").animate({opacity:1});

}

$(document).ready(function() {
setInterval( "slideSwitch()", 5000 );
});
</script>

<style type="text/css">
#slide-show .feedburnerFeedBlock ul {
margin:0 0 10px 0;
padding:0;
color:#000;
position:relative;
}
#slide-show .feedburnerFeedBlock {
height:80px;
overflow:hidden;
}
#slide-show .feedburnerFeedBlock ul li {
text-align:left;
position:absolute;
top:0;
left:0;
height:80px;
margin:0;
padding:0 0 10px 0;
background:#999;
color:#fff;
font-weight:bold;
}
#slide-show #creditfooter {
display:none;
}
</style>

<script src="http://feeds.feedburner.com/beben-koben?format=sigpro" type="text/javascript"></script>
</div>
NB:
#Script yg diberi warna merah jika sudah ada dan minimal versi jquery/1.3.2 tidak usah dipakai.
#Tulisan yg berwarna biru itu ganti dengan link address feedburner sobat :)
#Lihat deh hasilnya :)
Sobat sudah memiliki slideshow berupa headlines postingan yg terakreditasi dengan feedburner sobat b-) :-bd
Bye bye :-h
Can find it too here:
http://www.webdezine.co.cc/2010/09/automatic-jquery-content-slider-for.html
http://hackspc.com/create-a-unique-headline-animator-from-feedburner-using-jquery/

Ini mungkin simpel juga nih sob Snook.ca :D
Loading...
XSmall and Simple Slideshow jQuery

Subscribe my posts Register For Free!

2 comments

[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...


MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE