Background Image Rotation on Refresh

[mishutkadesign]

Hello everyone:

I'm building a relatively simple website, and would like the background image change on refresh. As opinions seem to differ about using JS vs. PHP, I decided to go the PHP route. I found a PHP rotator script here: http://www.alistapart.com/articles/randomizer.

Here it is in PHP:

<?php

/*

    AUTOMATIC IMAGE ROTATOR
    Version 2.2 - December 4, 2003
    Copyright (c) 2002-2003 Dan P. Benjamin, Automatic, Ltd.
    All Rights Reserved.

    http://www.hiveware.com/imagerotator.php
    
    http://www.automaticlabs.com/

    INSTRUCTIONS
    1. Modify the $folder setting in the configuration section below.
    2. Add image types if needed (most users can ignore that part).
    3. Upload this file (rotate.php) to your webserver.  I recommend
       uploading it to the same folder as your images.
    4. Link to the file as you would any normal image file, like this:

            <img src="http://example.com/rotate.php">

    5. You can also specify the image to display like this:

            <img src="http://example.com/rotate.php?img=gorilla.jpg">
        
        This would specify that an image named "gorilla.jpg" located
        in the image-rotation folder should be displayed.
    
    That's it, you're done.

*/




/* ------------------------- CONFIGURATION -----------------------


    Set $folder to the full path to the location of your images.
    For example: $folder = '/user/me/example.com/images/';
    If the rotate.php file will be in the same folder as your
    images then you should leave it set to $folder = '.';

*/


    $folder = '.';


/*    

    Most users can safely ignore this part.  If you're a programmer,
    keep reading, if not, you're done.  Go get some coffee.

    If you'd like to enable additional image types other than
    gif, jpg, and png, add a duplicate line to the section below
    for the new image type.
    
    Add the new file-type, single-quoted, inside brackets.
    
    Add the mime-type to be sent to the browser, also single-quoted,
    after the equal sign.
    
    For example:
    
    PDF Files:

        $extList['pdf'] = 'application/pdf';
    
    CSS Files:

        $extList['css'] = 'text/css';

    You can even serve up random HTML files:

        $extList['html'] = 'text/html';
        $extList['htm'] = 'text/html';

    Just be sure your mime-type definition is correct!

*/

    $extList = array();
    $extList['gif'] = 'image/gif';
    $extList['jpg'] = 'image/jpeg';
    $extList['jpeg'] = 'image/jpeg';
    $extList['png'] = 'image/png';
    

// You don't need to edit anything after this point.


// --------------------- END CONFIGURATION -----------------------

$img = null;

if (substr($folder,-1) != '/') {
    $folder = $folder.'/';
}

if (isset($_GET['img'])) {
    $imageInfo = pathinfo($_GET['img']);
    if (
        isset( $extList[ strtolower( $imageInfo['extension'] ) ] ) &&
        file_exists( $folder.$imageInfo['basename'] )
    ) {
        $img = $folder.$imageInfo['basename'];
    }
} else {
    $fileList = array();
    $handle = opendir($folder);
    while ( false !== ( $file = readdir($handle) ) ) {
        $file_info = pathinfo($file);
        if (
            isset( $extList[ strtolower( $file_info['extension'] ) ] )
        ) {
            $fileList[] = $file;
        }
    }
    closedir($handle);

    if (count($fileList) > 0) {
        $imageNumber = time() % count($fileList);
        $img = $folder.$fileList[$imageNumber];
    }
}

if ($img!=null) {
    $imageInfo = pathinfo($img);
    $contentType = 'Content-type: '.$extList[ $imageInfo['extension'] ];
    header ($contentType);
    readfile($img);
} else {
    if ( function_exists('imagecreate') ) {
        header ("Content-type: image/png");
        $im = @imagecreate (100, 100)
            or die ("Cannot initialize new GD image stream");
        $background_color = imagecolorallocate ($im, 255, 255, 255);
        $text_color = imagecolorallocate ($im, 0,0,0);
        imagestring ($im, 2, 5, 5,  "IMAGE ERROR", $text_color);
        imagepng ($im);
        imagedestroy($im);
    }
}

?>

Problem is, I can't make it work. Per instructions, I put the following under BODY in CSS:

background-image: url (../path/to/images/rotate.php);
background-repeat: no-repeat;

I tried #mainwrapper with no success. Obviously, I'm not putting it in the right place. I'm feeling really dim, because it's supposed to be really simple... Where should this go to rotate the background images? Thanks a million!

P.S. Here is my site with the static image in the background: www.mishutkadc.com

[kobra]

Where do you have rotate.php loaded on the server?
For now place it in includes/templates/classic/images/
You posted

background-image: url (../path/to/images/rotate.php

Make that

background-image: url (../images/rotate.php;

Se if this helps

[mishutkadesign]

Thank you, Kobra!
I initially created a separate "rotation" folder under: includes/templates/classic/images/

So the path that doesn't work is:

background-image: url (../images/rotation/rotate.php);

I tried the path you suggested, directly in "images"--no success.

What am I missing?

[kobra]

I tried the path you suggested, directly in "images"--no success.

What am I missing?

All I have provided is based upon what you posted...
I have not a clue where the images to be rotated to are called from in their code...
Do you have additional images to rotate to?
Where does this script expect them to be?
Are they there?

[mishutkadesign]

Sorry about being unclear ;-) The answer to your questions is "yes."

The PHP rotator instructions read: "Upload rotate.php file to your webserver. I recommend uploading it to the same folder as your images."

Did that. I have rotate.php and 4 images (named 1.png, 2.png, 3.png and 4.png) all located in one folder:

includes/templates/classic/images/rotation

Then: "Link to the file as you would any normal image file, like this <img src="http://example.com/rotate.php">

Did that, too. The CSS reads:

body {

background-image: url (../images/rotation/rotate.php);

}

And it doesn't work. Thanks so much for helping me out with this, Kobra, I really appreciate it!

[kobra]

How about a link to where you got this...

[mishutkadesign]

Here is the link to the article, code and instructions:

http://www.alistapart.com/articles/randomizer

Thank you!