Impossibly simple image randomizer with jQuery

Posted December 28, 2009 by Brian Cray

Reading time: About 1 minute

A common design pattern—if you want to call it that—is to display a random header image or advertisment on each new pageview. I’m always looking for ways to simplify code [see 1, 2, 3], and naturally, I tried to do it here.

Today’s impossibly simple code turns the task of image randomization into a 1-line jQuery code snippet. Awesome.

1. Start with an array of images

Change the image filenames in the array to the actual filenames. Don’t include the directory—filenames only.

1

var images = ['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg'];

2a. Set a random header background with jQuery and CSS background-image

The following code assumes your header has an ID of #header and your images directory is just “/images”. Change them if necessary.

1

$('#header').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'});

2b. Insert a random advertisement with jQuery and DOM injection

The following code assumes your ad container has an ID of #ad and your images directory is just “/images”. Change them if necessary.

1

$('<img src="images/' + images[Math.floor(Math.random() * images.length)] + '">').appendTo('#ad');

About the author

Photo of Brian Cray

Brian Cray is a Columbus, Ohio-based web entrepreneur & consultant. View some of Brian’s work in his portfolio and learn how to make kick ass websites by reading his blog.

13 Article comments

Show/add comments

4 Article references from other blogs

Show all references

1575
Previous:
Next: