Javascript Image Randomizer

From Blogsome

It may be important to you to add a little variability to the content of your weblog, so that visitors don't see the same thing every time they load your page. One easy way to do this is an image rotator, which changes an image on your page every time it is loaded. With Blogsome, the easiest way to accomplish this is through the use of a JavaScript, such as the one below:

{literal}
<script type="text/javascript">
<!-- //
var prefix = "<img src=\"";
var postfix = "\" />";
var rnumb = "";
var img = "";

rnumb += Math.floor(Math.random()*4);
img = rnumb;

if (img == "0") {
document.write(prefix+ "image1.jpg" +postfix);
}

if (img == "1") {
document.write(prefix+ "image2.jpg" +postfix);
}

if (img == "2") {
document.write(prefix+ "image3.jpg" +postfix);
}

if (img == "3") {
document.write(prefix+ "image4.jpg" +postfix);
}
// -->
</script>
{/literal}

[edit] The Explanation

Going through this script line-by-line reveals how this script works, and how you can modify it for your own use, fairly quickly. Let's start at the beginning:

{literal}

The {literal} and {/literal} tags tell Smarty, the Blogsome template engine, not to interpret whatever text comes between them. Without them, Smarty will attempt to interpret any text in curly brackets, {}, as a template command.

<script type="text/javascript">
<!-- //

These two lines, and their counterparts at the end of the file, let browsers know that the following text should be interpreted as a JavaScript.

var prefix = "<img src=\"";
var postfix = "\" />";
var rnumb = "";
var img = "";

This block sets up our variadfbles. "prefix" is the text that will be added before the image name, and "postfix" is the text that will be added after it. It is important that you create the entire tag you want to use with JavaScript, rather than just writing out the image name using JavaScript. If you don't, visitors without JavaScript will get a fragmentary tag like this:

<img src="" />

This will cause no end of trouble for you in debugging your page layout, and will also prevent your page from validating. Always test your page with JavaScript turned off to make sure it will be accessible to all visitors, and always validate your code.

rnumb += Math.floor(Math.random()*4);
img = rnumb;

This block of code assigns a random number to our "image" variable. In thise case, we have four images, so we have generated a random number from 0 to 3. Make sure that the number at the end of the "rnumb" statement is the same as the number of images you plan to rotate between.

if (img == "0") {
document.write(prefix+ "image1.jpg" +postfix);
}

These blocks write out the final image tag to your HTML document. You will need one of these "if" structures for every image you plan to rotate through. Start numbering them at "0", and work your way on up. (Of course, make sure that no to "if" statements share the same number!)

[edit] Improvements

It is almost certain that this script can be improved upon - it was a quick fix to a problem the author ran into on his weblog. If you have any ways to make this script faster, more flexible, or more efficient, feel free to contribute them here.