reactortrip
New Member
Jquery puzzleI'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:\[code\]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); \[/code\]And this is rotate.php:\[code\]<?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); }}?>\[/code\]