[grichter]

I have a PHP / JS slideshow script where the images used for the slideshow reside in a directory outside of the html page and a PHP script grabs all images in this directory and then creates an array, and passes it to a piece of Javascript on the html page. This allows for the site owner (who is not a dev) to easily update their slideshow by either adding or removing images from this directory.

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

[andrewsw]

The opening PHP tag is <?php not <? but this may not be the main issue.

[nathanpc]

I would suggest you to take a look at CSS Transitions, a great article to understand them is Using CSS transitions. Another great resource for your case would be Cross fading images with CSS Transitions.

[grichter]

Thanks for the bit on the PHP tag, I've corrected that, but that's not the cause of the issue.

Using a separate jQuery script, i'm able to get the inital image to fade, but the rest of the images just rotate w/ no fade. Again, I believe this is related to the fact that there is actually only a single image on the page for the slideshow, and the PHP script is setting an attribute to allow the image to be rotated. How can I then get the fadein to apply to all of the successive images behind it?

Here is the updated code for the page:

<script src="phpslide/getimages.php"></script>
     
<div id="home_images"><img id="slideshow" src="phpslide/image_1.jpg" /></div>

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

}
</script>

<script type="text/javascript">
$(function(){
	$('#home_images img').hide();				
	$('#home_images img').fadeIn(1000);
	});
</script>

Thanks
Gregg

[andrewsw]

Print the array just after the page has loaded:

$(function(){
    console.log(galleryarray);

The press F12 to open the browser's developer tools or console, look in the Console window. While you are there check any error messages? In Firefox you may need to install Firebug.

Is the array correct?