My issue is, I can't seem to figure out how to do a simple fade in transition for each image as they are dynamically loaded. After playing around a bit, I'm able to get the first image to fade in, but none of the rest. I know my issue is that I have a single 'img' element on the page, but not sure where to go from here. Any help / suggestions are much appreciated!!
Here is the HTML / JS snippet:
<script src="phpslide/getimages.php"></script> <script type="text/javascript"> var curimg=0 function rotateimages(){ document.getElementById("slideshow").setAttribute("src", "phpslide/"+galleryarray[curimg]) curimg=(curimg<galleryarray.length-1)? curimg+1 : 0 } window.onload=function(){ setInterval(rotateimages, 3500); setTimeout("fadein()",1000); } </script> <div id="home_images"><img id="slideshow" src="phpslide/image_1.jpg" /></div> </div>
And here is the getimages.php file:
<? Header("content-type: text/javascript"); function returnimages($dirname=".") { $pattern="(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)"; $files = array(); $curimage=0; if($handle = opendir($dirname)) { while(false !== ($file = readdir($handle))){ if(eregi($pattern, $file)){ //if this file is a valid image //Output it as a Javascript array element echo 'galleryarray['.$curimage.']="'.$file .'";'; $curimage++; } } closedir($handle); } return($files); } echo 'var galleryarray=new Array();'; //Define array in Javascript returnimages() //Output the array elements containing the image file names ?>
Thanks
Gregg