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

Something like this might work, assuming that your PHP script simply returns the URL of the image:

$(document).ready(function(){
    window.setInterval(switchImage, 10000);

    function switchImage() {
        var rn = Math.floor(Math.random() * 100000)
        $.get('http://mydomain.com/images/rotate.php', 
              { n: rn }, 
              receiveNewImage);
    }

    function receiveNewImage(src) {
        $('#image').fadeTo(1000, 0.0, function() { switchAndFadeIn(src); } );
    }
    function switchAndFadeIn(newSrc) {
        $('#image').attr('src', newSrc).fadeTo(1000, 1.0);
    }
});

EDIT: Added random parameter.

EDIT: In your PHP, does something like this help?

header("Cache-Control: no-cache, must-revalidate");
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Expires data in the past

Answer 2

Since your php script is returning the source of the new image, you might be best to avoid using load() and use a simple ajax call that swaps the image's source.

var img=$('#image');//cache the element

function refreshNotification(){
  $.ajax({
    url: 'http://mydomain.com/images/rotate.php',
    success: function(src){
      img.attr({src: src});
    }
  });
}

setInterval(refreshNotification, 10000);

Answer 3

$("#image").each(function({
$(this).fadeOut(function() { 

$(this).attr("src", "http://mydomain.com/images/image.jpg"); 
$(this).load(function() { $(this).fadeIn(); }); // this should be on the bottom....
}); 
})

Check each function on JQEach

I have updated the script i think it should work because you are waiting for an image to load, but it doesn't have a source... check this out > <img onerror="alert('there was an error') />" if you get the error it means that the source doesn't exist. btw you should not use the #image if you are planning to use multiple images as there can be one unique id on your html otherwise you will get conflicts

hope this helps

Answer 4

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".

Answer 5

Your setup is missing the step of telling jQuery not to cache the AJAX request. There's a 'cache' parameter that can be added to an AJAX call to force it to grab a new copy:

$.ajax({
  url: 'http://mydomain.com/images/rotate.php',
  cache: false,
  success: function(src){
    img.attr({src: src});
  }
});

Answer 6

How about defining the swapImage() function outside of the $(document).ready() block?

<script type="text/javascript" scr="path/to/jquery.js"></script>
<script type="text/javascript">
function swapImage(){
    var time = new Date();
    $('#rotate').fadeOut(1000)
     .attr('src', 'rotate.php?'+time.getTime())
     .fadeIn(1000);
}
$(document).ready(function(){
  var imageInterval = setInterval('swapImage()',5000);
});
</script>

<img src="rotate.php" id="rotate" />