Random image slideshow

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

1 Like

Please keep in mind that this will draw the images from the server every time the template get displayed, reducing data limit (if you have one, ofcourse).

You are right @MedusaDelft! Any suggestions as how I can overcome this? Perhaps a CRON based copy action every hour/day? But then I will have to root my device (Mininx Neo X5 - Android 4.1.1)
I could put the images as Media in Xibo… but I would rather have a seperate map so others can FTP new images.

Or are there other options?

If your images will always be named 1 to 10 you could add them to a dataset with the image column type and then add that dataset as a ticker item.

The images will be downloaded and cached by Xibo and refreshed depending on the update interval you have defined on the ticker.

You wouldn’t need any embedded code, the images would be cached and automatically pulled when they were updated (provided the file names stayed the same). You would need to wait for 1.7.2 (next week I hope) or use the latest ZIP from GitHub.

Hi,

Do we need to specify the external URL to the Image in the image column type and also use the image tag in the html of the Ticker item to actually display that image.

thanks
btech

Yes you do - the “container” for the image is left to you at present in case you want to reference it with CSS instead of an img tag.