Image rotation script?

[Dctape]

I"ve been asked to help with our church website some. The only problem is that I was aksed if we could have a section on the front page that includes a picture that changes everytime the page reloads. I'm using GoLive CS and have no budget (it IS a church....) Are there any easy ways or even a script that will do this?

Thanks!

-M

 

[angelwatt]

If you just need to have a random image, that's pretty easy. In JavaScript create an array with the source path to all possible images, then use Math.random() to find a random number and use that to pick an image source in the HTML and apply that source to it. That's the basis anyways. If you need actual code I can whip something up fairly quickly or you can do a search and find ones others have made.

 

[Dctape]

Thanks. I'm not much of a coder so I'll need a little more help. I'll have a bank of about 5 or 6 images and they want a different one to come up each time the page loads.
Thanks for the help.

-M

 

[angelwatt]

Thanks. I'm not much of a coder so I'll need a little more help. I'll have a bank of about 5 or 6 images and they want a different one to come up each time the page loads.
Thanks for the help.

-M

OK, here's the JavaScript

window.onload = function() {
  var images = ['image1.jpg', 'image2.jpg'];
  var x = Math.floor(Math.random() * images.length);
  document.getElementById('randImg').src = images[x];
};

And example HTML

<p><img id="randImg" src="image.jpg" width="156" height="197" /></p>

Make sure to supply an image by default so people who don't have JavaScript enabled still get a picture. I'm also assuming the images are the same size. Otherwise you have to setup a deeper array that also contains the image dimensions. Let me know how this works for you. Oh, and since it is random you may get the same image multiple times in a row, it's just the nature of random.