Grow your CSS skills. Land your dream job.

How Do They Do It? (Banner Rotation)

  • # August 9, 2009 at 7:44 pm

    http://clwydmc.co.uk/

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

    Al

    # 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: http://ma.tt/scripts/randomimage/ (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:

    http://php.about.com/od/finishedphp1/qt … banner.htm

    Essentially, it’ll be something like this:

    <?php
    $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:

    images.php

    Code:
    < ?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 = "http://www.yoursite.com/images/imageBank/";
    $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:

    Code:
    < ?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.

*May or may not contain any actual "CSS" or "Tricks".