Utility Room

I needed a slideshow that would load (in a way, asynchronously) after the page has been loaded and would show something without JavaScript.

This solution requires jQuery and jQuery Cycle plugin (lite version will do).

<div id="slideshow">
<img src="default-image.jpg" alt="" /><!--defaults to this image without javascript -->
</div>

<script type="text/javascript">
$(document).ready(function() {
  //// random slides
  var SLIDE_COUNT = 12;
  var r = Math.floor(Math.random()*SLIDE_COUNT+1);
  var i = 1;
  $('#slideshow').empty(); // clears the slideshow contents (default image)
  for (i = 1; i <= SLIDE_COUNT; i++) {
    $('#slideshow').append('<img src="slide-' + r + '.jpg" alt="" />');
    r = (r % SLIDE_COUNT) + 1;
  }

  //// fixed slides
  //$('#slideshow').append('<img src="slide-1.jpg" alt="" />');
  //$('#slideshow').append('<img src="slide-2.jpg" alt="" />');

  $('#slideshow').cycle();
});
</script>