jQuery and php image rotater puzzle

Question

Jquery puzzle

I've got a php script that returns the name of random jpg image from a folder. It's nice because I don't have to rename the images at all; I just drop them in the folder and the randomizer works. Right now, I call the script like this - http://mydomain.com/images/rotate.php - and on a simple web page reload, it swaps the images.

But I'd like to have it work with jQuery in that I'd like to have the image swap in a new image on an interval of ten seconds or so, and also fade them in and fade them out.

Edit 1/23/10:

This works by swapping in a spacer.gif. There might be a more elegant solution, but this works for me. Munch figured it out, by way of an idea by MidnightLightning:

function swapImage(){
  var time = new Date();
  $('#image').fadeOut(1000)
   .attr('src', 'http://mydomain.com/spacer.gif')
   .attr('src', 'http://mydomain.com/images/rotate.php?'+time.getTime())
   .fadeIn(1000);
}

var imageInterval = setInterval('swapImage()',10*1000); 

And this is rotate.php:

<?php

$folder = '.';


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


$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);
    }
}

?>

Answer 1

The downside I see to doing it like this is that there will be a load period for the new image and the animation may be a little quirky because of it. It may be beneficial to have two parts to that file where a path is returned if a $_GET value is equal to one thing, and the image is returned if that $_GET value is not set or it equals something else. That way you could preload a series of images and there would be a smoother animation between images.

Having said that, it seems to me that something like this should work.

$(document).ready(function(){
   function swapImage(){
      var time = new Date();
      $('#image').fadeOut(1000)
       .attr('src', 'http://mydomain.com/images/rotate.php?'+time.getTime())
       .fadeIn(1000);
   }

   var imageInterval = setInterval('swapImage()',10*1000); 
});

The time makes it so the browser think it's getting a new image.

Spacer.gif

To do this with a black spacer, I'd recommend wrapping your image in a div and giving the div a #000 background color to match the spacer:

#image-wrap{background-color:#000;}

It would make it so the image actually faded to black, rather than fading to your current background color, changing to black, and fading back in. The js would be very similar to the above:

function swapImage(){
  var time = new Date();
  $('#image').fadeOut(1000)
   .attr('src', 'http://mydomain.com/spacer.gif')
   .attr('src', 'http://mydomain.com/images/rotate.php?'+time.getTime())
   .fadeIn(1000);
}

var imageInterval = setInterval('swapImage()',10*1000); 

Keeping the time in there probably isn't necessary, but hey, it's another safe-guard against the browser caching the "image".