Get a free trial // Grow your CSS skills // Land your dream job

How Do They Do It? (Banner Rotation)

  • # August 9, 2009 at 7:44 pm

    the home page image at the top of the page changes each time you enter the page, how is this done?


    # August 9, 2009 at 8:53 pm

    I don’t see a Javascript being called, so perhaps a PHP image rotator? It certainly seems to be a random selection, several refreshes doesn’t seem to be revealing any particular order…

    Matt Mullenweg developed the code for a method to achieve this here: (it’s been improved upon since, but you’ll get all the detail from the site anyhow).

    EDIT – you might try this with the buffs in the Javascript or PHP forums, you’ll certainly get a better answer! ;)

    # August 10, 2009 at 1:52 am

    It will automatically change because of the links on it.

    # August 10, 2009 at 1:40 pm

    I’m a huge fan of PHP for this. So much so that I’m moving this topic to the PHP section!

    You can simply use the rand() function to achieve the results. Here’s a really simple explanation: … banner.htm

    Essentially, it’ll be something like this:

    $num = rand(1, 5);

    <img class="classname" alt="" src="images/banner-<?php echo $num; ?>.jpg" />

    # August 11, 2009 at 2:20 am

    here is how I do it on a site not with banners of course, but it is essentially the same:


    < ?php /* STORE BANKS OF IMAGES AS INTEGER NUMBERS WITH A .jpg EXTENSION. ONCE STORED AND IMAGES UPLOADED, CHANGE THE $maxNumImages VARIABLE TO MAXIMUM NUMBER OF IMAGES IN THAT DIRECTORY */ //****** MAIN IMAGE SETTINGS ******** $maxNumImages = 3;// change this number to the total number of images $imageURL = ""; $imageExtension = ".jpg"; //****** RANDOM NUMBER GENERATOR ******** $num = rand(1, $maxNumImages); //****** GENERATING ARRAY OF IMAGES ******** for ( $counter = 1; $counter <= $maxNumImages; $counter += 1) { $image[$counter] = $imageURL . $counter . $imageExtension; } //****** CAPTIONS FOR ARRAY OF IMAGES ******** //you may not want to use this, but I had to... if you don't eliminate all $caption[] everywhere in script $caption[1] = "One"; $caption[2] = "Two"; $caption[3] = "Three"; //****** OUTPUT OF IMAGE ******** echo "
    echo “
    ” . $caption[$num] . “



    and the HTML I use:

    < ?php include('/data01/path to sites script/scripts/images.php'); ?>
    # August 11, 2009 at 3:54 pm

    I like that a lot – look waaaaaay simpler than any other method I’ve seen. Nice one.

    # August 11, 2009 at 4:28 pm
    "EamonnMac" wrote:
    I like that a lot – look waaaaaay simpler than any other method I’ve seen. Nice one.

    if your talking about the post I made Eamon, then it will only refresh the image on page load other than that it would need javascript.

    but I prefer this method its not too in your face fancy

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed