I was looking around for a slideshow that doesn’t show the same images each time the layout starts.
I finaly came up with this. Hope it helps some people to implement a random image slideshow.
As my images are stored in a map on the Server I referenced them in the embedded code:
You can add as many images as you like, just add the lines in the code.
Have fun!
HTML
<html>
</html>
HEAD to Embed (had to fill in something)
<script type="text/javascript">
function EmbedInit()
{
// Init will be called when this page is loaded in the client.
}
var delay=2000 //set delay in miliseconds
var curindex=0
var randomimages=new Array()
randomimages[0]="http://www.yourserver.com/xibo/slideshow/image01.jpg"
randomimages[1]="http://www.yourserver.com/xibo/slideshow/image02.jpg"
randomimages[2]="http://www.yourserver.com/xibo/slideshow/image03.jpg"
randomimages[3]="http://www.yourserver.com/xibo/slideshow/image04.jpg"
randomimages[4]="http://www.yourserver.com/xibo/slideshow/image05.jpg"
randomimages[5]="http://www.yourserver.com/xibo/slideshow/image06.jpg"
randomimages[6]="http://www.yourserver.com/xibo/slideshow/image07.jpg"
randomimages[7]="http://www.yourserver.com/xibo/slideshow/image08.jpg"
randomimages[8]="http://www.yourserver.com/xibo/slideshow/image09.jpg"
randomimages[9]="http://www.yourserver.com/xibo/slideshow/image10.jpg"
var preload=new Array()
for (n=0;n<randomimages.length;n++)
{
preload[n]=new Image()
preload[n].src=randomimages[n]
}
document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]+'">')
function rotateimage()
{
tempindex=Math.floor(Math.random()*(randomimages.length))
if (curindex==tempindex)
{
curindex=curindex==0? 1 : curindex-1
}
else curindex=tempindex
document.images.defaultimage.src=randomimages[curindex]
}
setInterval("rotateimage()",delay)
</script>
Original code from: http://www.javascriptkit.com/script/script2/randomslide.shtml