CSS

Tuesday, May 22, 2012

Simple Background SlideShow with jQuery

It's a small wonder that many jQuery plugins were developed with the intention of easily introducing pretty slideshows to display and rotate series of images. However, almost none of these slideshow plugins utilize the idea of rotating CSS backgrounds. :)

<!-- jQuery Library -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" type="text/javascript"></script>
<!-- Simple Background SlideShow Script -->
<script src="http://jquery-aing.googlecode.com/files/BackgroundSlideShowAing.js" type="text/javascript"></script>
<!-- Call ssBG.SlideMyBG() function after the page fully loaded -->
<script type="text/javascript">$(window).load(function(){ssBG.SlideMyBG()})</script>
<!-- Advanced settings -->
<script type="text/javascript"> $(window).load(function(){ var MYlist=[ "http://mysite.com/photo1.jpg", "http://mysite.com/photo2.jpg" // No coma at the end of list ]; var MYstyle='diurut aje bang dari awal ye'; // Default is random var MYspeed=10000; // Delay between image changes var MYbgPos='top center'; // background-position var MYbgSize='100%'; // background-size (you may try auto 100%) var MYbgRep='repeat-x'; // repeat-y, repeat, no-repeat ssBG.SlideMyBG(MYlist,MYstyle,MYspeed,MYbgPos,MYbgSize,MYbgRep) }) </script>
<!-- To add a new collection into an existing, you may use ssBG.gbr.concat(list1,list2) -->
<script type="text/javascript"> $(window).load(function(){ var MYlist1=[ "http://mysite.com/photo1.jpg", "http://mysite.com/photo2.jpg" // No coma at the end of list ]; var MYlist2=[ "http://mysite.com/photo3.jpg", "http://mysite.com/photo4.jpg", "http://mysite.com/photo5.jpg" // No coma at the end of list ]; ssBG.gbr=ssBG.gbr.concat(MYlist1,MYlist2); ssBG.SlideMyBG('','sort','','','auto 100%'); }) </script>

I am always receptive to any thoughts/suggestions you might have, so have words with me in the comments.

14 comments:

Tubaguz Deden Anwarudin said...

Wah... tpsnya keren2...

Manstaaabbbb...

berguru ah.... XD

Bos nyungkeun script nu sidebar palih kiri euy..

hatur nuhun....

Pimpim Blog Apps Batch File DLL said...

yang otomatis donk om ..
kyk di blognya namapanjang.blogspot.com :D

SANCAY said...

gan please kasih tahu caranya.. ganti warna biru template faceblog.. please kasih codenya yg harus dignti yang mana...

┌∆פυΠб ςђдδзҐ┐ said...

hadeee euyy

Anonymous said...

hadeee euyy

ovan si odonk said...

gemana siiih,..

Sancay Alexandra said...

gracias

Gembel Symbian said...

manta a*

Tedi Ansah said...

KK bagi cara ganti nama sepuas nya dong , plizzz

Daskatae Ikhouvanje said...

gan gmana caranya
ganti nama fb berxx...?

Emre G'Gs said...

Sadece Sen .. <3 ))

Anonymous said...

NAISL ŞİFRE GLİO BİLEN VRMI

Mans Nax Outsiders said...

Bang Klo mau nambah fotonya Gimana?

Fasmawi Saban Garut Selatan said...

assalamualaikum,teman,sya mau tanya,gimana cara gunta ganti background pake gambar remaja2 inggrs kya blog ini?mhon bantuanya,terimakasih wasalam