Random or Sequence Changing Images

SitePoint Members,
Is there code for changing randomly or in sequence dispayed images?



Lots of ways. For example, in jQuery:

<script type="text/javascript">
    $.fn.shuffle = function() {
        var allElems = this.get(),
            getRandom = function(max) {
                return Math.floor(Math.random() * max);
            shuffled = $.map(allElems, function(){
                var random = getRandom(allElems.length),
                    randEl = $(allElems[random]).clone(true)[0];
                allElems.splice(random, 1);
                return randEl;
        return $(shuffled);

$(function () {
            $('div.slideshow img').shuffle();

Depends on what you are trying to do, though. We’d need more information. It could be doe without a JS library, and with PHP, too, probably.

I hear about problems with javascript all the time. How about php, htnl, or css.

JS is fine, as long as it’s used wisely. That script works very reliably. Anyhow, as I said, you need to give some details of what you are trying to do.

Once I find the right images, I thought I’d have a different header image each time a visitor goes to a different page. I propably wouldn’t use the code if it were javascript.

Thanks Ralph

You can do that in PHP.
Just name your images accordingly (e.g. IMG_1.jpg, IMG_2.jpg, IMG_3.jpg etc) and put them all in the same directory.
Then, just generate a random number and use it to constract the image path:

$rand = rand(1,3);
echo ('<img src="' /img/random/' . $rand . '.jpg" alt="Random Image" />');

PHP is some powerful stuff.
On the part … = rand(1,3);

If I have 7 images, for example, I would use …= rand(1,7); right?

I’m gong to have one of these
echo (‘<img src="’ /img/random/’ . $rand . ‘.jpg" alt=“Random Image” />’);
for each image right?, since there’s only one src=“” in that line you gave me.


Hi there,

So, first off, let me see if I’ve understood what you are trying to do:

You have a page with a header image.
Every time the visitor loads the page, you want that header image to be one of seven images, which is selected at random.

Is that correct?

Yes, but if using a random function will slow the site then in series (in order).

Nah, it won’t slow the site.

So, what you want to do is create a directory within your website’s root directory.
E.g. /images/random

Then, copy your seven images into that directory and name them IMG_1.jpg, IMG_2.jpg, IMG_3.jpg, IMG_4.jpg, IMG_5.jpg, IMG_6.jpg, IMG_7.jpg

Then, on every page you want the random image to appear, add this code in the relevant position:

$rand = rand(1,7); 
echo ('<img src="/imgages/random/IMG_' . $rand . '.jpg" alt="Random Image number ' . $rand . '" />');

What this script will do, is every time the page loads, it will generate a random number between one and seven, then add that to the file name.

E.g. if it generates 6, the HTML rendered will be:

<img src="/imgages/random/IMG_6.jpg" alt="Random Image number 6" />

Does that make sense?

By hand. Had wordpress, got tired of updates, too slow. It sure was a lot of work to go back.
Take out -

I haven’t got the pictures to use just yet but I’m sure I’ll be doing it soon. I think my code and htaccess and css are fully tweaked as is practical, so it’s the next project.

Oh, sorry, I was updating my post while you were replying (a bad habit)
See my last post for more info.

I started signing in to write whengmail noitified me. I think sitepoint is notifying google mail before the member is finished.

Nah, I submited my original post and you were notified.
Then I though, “Oh hang on” and started editing the post I just submitted, during which time you had already answered.
Sorry for the confusion.

Yeah it makes sense.
That src points to the folder containing the images, not any one image.

Thanks for the help!