Edit Slideshow to Start in Random Image (Prototype/Scriptaculous)

I'm using the below code which creates a simple slideshow. I would like to edit it so that it starts off on a random image and not always the first image. Anyone know how I would do this? I need to use Prototype/Scriptacuolus for this.

Thanks!


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head><script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/effects.js"></script>
<style>
/* slideshow */
.fadein { position:relative; height:331px; width:720px; }
.fadein img { position:absolute; left:0; top:0; }
</style>
<title>SlideShow Example</title>
</head>
<body>
 <ul class="fadein" onmouseover="stop_slideshow()" onmouseout="start_slideshow()">
  <li><a href="http://google.com"><img src='slider.jpg' alt="" /></a></li>
  <li><a href="http://example.com"><img src='slider1.jpg' alt="" /></a></li>
  <li><a href="http://google.com"><img src='slider2.jpg' alt="" /></a></li>
  <li><a href="http://example.com"><img src='slider3.jpg' alt="" /></a></li>
  <li><a href="http://google.com"><img src='slider4.jpg' alt="" /></a></li>
 </ul>
<script type="text/javascript">
var duration = 4000;
var showNextImage = true;
  function stop_slideshow() {
   showNextImage = false; 
  } 
  function start_slideshow() {
   showNextImage = true; 
  }
setInterval(function(){
if(!showNextImage){ return; }
var imgs = $$('.fadein img'), visible = imgs.findAll(function(img){ return img.visible(); });
if(visible.length > 1) {
visible.last().fade({ duration: 1 });
} else {
imgs.last().appear({ duration: 1, afterFinish: function(){ imgs.slice(0,imgs.length-1).invoke('show'); } });
}
}, duration);
</script> </body>
</html>

Edit Slideshow to Start in Random Image (Prototype/Scriptaculous)

almo136

astupidname

almo136

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week