Random image on refresh, next image on click?

[lonrat]

Does anyone know how to have an image change to a random image when the page loads and/or refreshes, and also have it where if you click on the image is goes to the next image, in sequence? Thanks!

[PcPro12]

Can you be more specific? What are you trying to achieve? A slideshow? Or just displaying random images that can be cycled by clicking on them?

[nauticalmac]

So many possibilities. If you already have an array of image paths in Javascript in your page source (e.g. 'imagepaths'), here's a function to pick a random index to select the next image (different from the last).

function nextindex(previous)
{
// slidemax is the size of your image path array
// (imagepaths.length)
    if (slidemax <= 1)   {return previous;}
    var randomnumber;
    for(;;) {
        if((randomnumber=Math.floor(Math.random()*slidemax)) != previous)   {
            break;
        }
    }
    return randomnumber;
}

This could be integrated into your page using, e.g. jQuery to change the 'src' attribute of the image.
Picking the next in sequence if obvious, something like
`

if (++imageindex >= slidemax)   {
        imageindex = 0;
    }

`
Or you could use an ajax call to get a new index using php

What part of the problem are you having difficulty with?

[JorgeM]

Take a look at this similar thread. It may have information you are looking for:

http://www.daniweb.com/web-development/threads/466413/making-a-website-with-a-changing-backgroung

[lonrat]

Thanks for the replies! Here is more specifically what I'm trying to do.

On this page: http://lonnyfoster.com/temp/hitech/index.html there is a black & white image in the lower right that looks like text. The white text in these images are testimonials.

I used a javaScript code that makes a random testimonial appear on page load. I was wondering if anyone knows how to add the behavior of clicking on the image to go to the next one.

For example, if the page loads and image03 randomly apears, then you click on it, image04 will appear. Click again and image05 will appear. Click again image06 will appear, and so on. Reload the page and get another random image. Does that make more sense?

Thanks again!!

[nauticalmac]

Hi,
Looking at your code, here's what I suggest.
NOTE THIS HAS NOT BEEN TESTED, maybe some work left for you to do.
I modified the randomize function to give access to the image array and image number. Then added an 'onclick' event to call a function which finds the next image and loads it into the background. Also suggest adding the CSS to make th area look clickable.

JS Modify existing and add
var images = new Array("images/testimonial1.png", "images/testimonial2.png", "images/testimonial3.png", "images/testimonial4.png", "images/testimonial5.png");
var imageNum = 0;
function Randomize() {
    imageNum = Math.floor(Math.random() * images.length);
    document.getElementById("navspace").style.backgroundImage = "url('" + images[imageNum] + "')";
}
window.onload = Randomize;

function loadnext() {
    if (++imageNum >= images.length)    {
        imageNum = 0;
    }
    document.getElementById("navspace").style.backgroundImage = "url('" + images[imageNum] + "')";
}

HTML add JS click event
<div id="rightContentDiv">
    <div id="navspace" onclick="loadnext();"></div>
</div>

CSS suggested add
#rightContentDiv #navspace  {cursor:pointer;}

Good luck!

[lonrat]

Thank you nauticalmac!! It worked like a charm, first time with no modification needed. It's in place so you can see it working if you want. You are brilliant!!

[nauticalmac]

Then vote :-)

[lonrat]

Vote?

[nauticalmac]

The little up arrow in my reply (up-vote). Mark of appreciation...
Don't care really, just started posting here.

[lonrat]

Oh, I see. I'm new here too. You got it!

[nauticalmac]

Thanks!