Geek Answers Handbook

JQuery and php image puzzle

Jquery puzzle

I have a php script that returns the name of a random jpg image from a folder. This is good because I don’t need to rename images at all; I just drop them into a folder and the randomizer works. Right now, I call the script like this: http://mydomain.com/images/rotate.php - and when you simply reload the web page, it swaps the images.

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

Edit 1/23/10:

This works by replacing in spacer.gif. There may be a more elegant solution, but it works for me. Munch realized this thanks to the idea of ​​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); } } ?>
+4
source share
6 answers

The drawback that I see in this is that there will be a loading period for the new image, and because of this, the animation can be a little bizarre. It may be useful to have two parts in this file where the path is returned if $ _GET is equal to one thing, and the image is returned if this $ _GET is not set or it is equal to something else. This way you can preload a series of images and there will be smoother animation between the 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); });

Time makes the browser think that it is getting a new image.

spacer.gif

To do this with a black spacer, I would recommend wrapping the image in a div and giving the background color of the div # 000 according to the separator:

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

This would make the image really fade to black instead of fading with the current background color, changing to black and fading again. js will 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);

Saving time there is probably not necessary, but, hey, this is another defense against the browser caching the "image".

+4
source

Since your php script returns the source of the new image, you might be better off avoiding the use of load() and using a simple ajax call that swaps the image.

 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);
+2
source

Something like this might work, assuming your PHP script just returns the image URL:

 $(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 a random parameter.

EDIT: In your PHP, 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
+1
source

How to define the swapImage() function outside 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" />
+1
source 
 $("#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.... }); })

Test each function on JQ Each

I updated the script, I think it should work because you are expecting the image to load, but it has no source ... check this> <img onerror="alert('there was an error') />" if you get an error , this means that the source does not exist. By the way, you should not use #image if you plan to use several images, since your html may have one unique identifier, otherwise you will run into conflicts.

hope this helps

0
source

There is no jQuery message step in your setup so as not to cache the AJAX request. There is a 'cache' parameter that can be added to an AJAX call to make it capture a new copy:

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

More articles:


All Articles