views:

345

answers:

3

I recently asked how to rotate images on an element and was presented with this code - which worked perfectly:

counter = 1; 
num_images = 9;
dir = "URL TO IMAGE DIRECTORY";

function rotateImage() {
    var background_img = 'url(' + dir + '/image' + counter + '.gif)';

    jQuery('#fader.category').fadeOut(function() {
        jQuery('#fader.category').css('background-image', background_img).fadeIn('slow');
    });     

    counter++; if (counter > num_images) counter = 1;           
}
setInterval( "rotateImage()", 25000 );

My question now is: How do I adapt this same code to make the images change on refreshing a page? I'm new to jQuery and Javascript in general so if someone provides a solution please explain how it works so I can learn and hopefully ask less questions later... Thanks so much

A: 

this is just a shot in the dark

<body onload="rotateImage();">
rockinthesixstring
Thanks dude I'll take that shot and try it.
JamieD
+1  A: 

I would recommend you use a random starting image to give the illusion of change on each page load/refresh. Otherwise you are left with writing a cookie of the last viewed image and showing the next one on page load:

Change the first two lines as follows (notice I reverse their order on purpose):

num_images = 9;
// Pick a random starting number
counter = Math.ceil(Math.random() * num_images); 

Of course there is the possibility of the same image randomly appearing again in a row, but it will probably be very close to what you want.

Doug Neiner
Or as Charlie Epps would say... "there's no such thing as a truly random number"... jk
rockinthesixstring
@rockinthesixstring Haha... I should have given code for using JSONP to pull a random number from a radioactive decay random number service :)
Doug Neiner
HAHAH yeah I think that would have been appropriate as I'm gonna use the script on a site called IAMANATOM !!!
JamieD
@JamieD this solution uses your existing script, it just starts on a different image each time. All subsequent rotation would not be random, but sequential according to your existing script.
Doug Neiner
A: 

Here is a simple approach to illustrate the concept that can be adapted to what you want. Put this in the header of the page:

<?php global $banner_id;  ?>
<?php   $banner_id=rand(0,N);  ?>
<style type="text/css">
  #header_image {
    background: #000000 url("/path_to_image_files/image_<?php echo($banner_id); ?>.jpg") top center no-repeat;
    }
</style>

Here $banner_id=rand(0,N); grabs a random number from zero to N. You of course insert your file path to the images you want to randomize and then in this case that should be a folder with images labeled, 'image_N.jpg' where N is randomized as expected. Also you will need to include this to declare a global variable to retrieve it later:

  <?php global $banner_id;  ?>

Then inside the body of your page simply use this div where you want the random image.

<div id="header_image">
Alex
Thanks guys on the randomising suggestions definitely useful however I want to stick with the script I have due to the wonderful fade in fade out.
JamieD