dougv.com | The Web home of Doug Vanderweide

Recenly asked on Yahoo! Answers:

Can you create this code?

I have a folder which contains images

I am looking for a simple code to put in my homepage,

This code will display an image randomly from that folder.

Any one can come up with that code?

This is very easily accomplished via JavaScript and the DOM. All you need to know is the names of your photos and the path to the folder where they are contained; then, it’s as simple as changing an IMG element on your page.

To begin, we create an IMG element on our page and give it an ID of myimage:

<img id="myimage" />

Next, we declare a global variable, named lastIndex, the purpose of which will be discussed shortly; create a JavaScript function called randomImage; then declare some variables:

• theImage will be a reference to the IMG element we named myimage in our document;
• imgDir will be the path to the directory where our images are stored. This path is relative to the current document, and must contain a trailing slash (/);
• imgArray is an array with the names of all the images in the images folder;
• imgIndex is a random number we will generate to display an image.

To make this code work on your site, you only need to change the imgDir path to match the relative path to your images folder, and the names of the images in imgArray to match the names of your images.

var lastIndex = 0;
 
function randomImage() {
	var theImage = document.getElementById('myimage');
	var imgDir = 'images/';
	var imgArray = new Array('bigtv.jpg','caddy.jpg','fatcat.jpg','manhart.jpg','roastdog.jpg');
	var imgIndex = 0;

We next make sure there are at least two images listed in the imgArray array. If there aren’t, we just escape the function.

If there are at least two images, we generate a random number that is 1 less than the total number of images we have. JavaScript begins array indexes at 0, so by multiplying a random against the number of items in the array, then rounding that off to the lowest integer, we get a number that matches an index in our images array.

However, we don’t want users to keep seeing the same images over and over again, and the fewer images in our array, the more likely we will see the same image. To resolve that problem, we store the index that we last used in the lastIndex global variable. We keep looping through the random number generator until we get an image that isn’t the same as the last image index.

Once we’ve found that, we set the value of lastIndex to be the same as the number we just generated.

if(imgArray.length > 1) {
	while(imgIndex == lastIndex) {
		imgIndex = Math.floor(Math.random() * imgArray.length);
	}
	lastIndex = imgIndex;

To finish, we simply create the path to our image by concatenating the imgDir value to the value of the array at the index we just generated; we then set the source of our image to be that path, and its alt value to be the same as the file name.

var imgPath = imgDir + imgArray[imgIndex];
 
theImage.src = imgPath;
theImage.alt = imgArray[imgIndex];

Here is a working demo:

http://www.dougv.com/demo/js_random_image/

You can download the source code, plus images, from here:

Display A Random Image With JavaScript / DOM Demo Code

As always, I distribute code under the Creative Commons Attribution / Share-Alike 2.5 License.