Simple Background Slideshow Simple Background Slideshow

\

Thursday, June 21, 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.

Subscribe to: Post Comments (Atom)