[in addition to my other topic/although on a separate note]

Okay this is what I want to do:
To have a slideshow that reads content of a folder and then shows the pictures and has a little fade effect between each image transition.

To achieve this I've done the following:
1. I'm using a php script to read the contents of a folder and spits out the results in an array that I can use within my java script

2. im using jquery.cycle plugin to add the "fade" effect.

Now my problem is that my images are shown but i cant get the fade effect from JQuery cycle plugin to have any any effects on my images.

here is how my code looks like:

My php file:

PHP Code:
PHP Code:
<?
//PHP SCRIPT: getimages.php
header('content-type: application/x-javascript');

//This function gets the file names of all images in the current directory
//and ouputs them as a JavaScript array
function returnimages($dirname="./images") {
     
$pattern="(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)"//valid image extensions
     
$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 .'";' "\n";
             
$curimage++;
                    } 
            }

            
closedir($handle);
}
        
sort($files);
        return(
$files);
}

echo 
'var galleryarray=new Array();' "\n"//Define array in JavaScript
returnimages() //Output the array elements containing the image file names

?>
My html file:

Code:
Code:
<html>
<meta http-equiv="refresh" content="1000"/> 
<head>
<title>Media Signage Slideshow</title>
<style type="text/css">
.pics {  
    height:  232px;  
    width:   232px;  
    padding: 0;  
    margin:  0;  
} 
 
.picsimg {  
    padding: 0px;  
    border:  0px solid #ccc;  
    background-color: #eee;  
    width:  200px; 
    height: 200px; 
    top:  0; 
    left: 0 
}
    #slideshow { height: 100%px; width: 100%px; margin: auto }
    #slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
	#slide {width: 370px; height: 220px; padding: 0;  margin:  0 auto; }
	
	#myslides {
	width: 370px;
	height: 220px;
    padding: 0;  
    margin:  0 auto;  
} 
 
#myslides img {  
    padding: 10px;  
    border:  1px solid rgb(100,100,100);  
    background-color: rgb(230,230,230);
    width: 350px;
    height: 200px;
    top:  0; 
    left: 0 
}
     
</style>
</head>
<!-- include jQuery library -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$('#myslides').cycle({
               fx: 'fade',
				speed: 5000,
				timeout: 2000
        });
});
</script>

<script type="text/javascript">

var curimg=0;
function rotateimages(){
galleryarray.sort();
document.getElementById("myslides").setAttribute("src", "images/"+galleryarray[curimg]);
curimg = (curimg+1) % galleryarray.length;
}

$('#myslides').ready(function() {
  $('#myslides').fadeOut('slow', function() {
    // Animation complete.
  });
});

window.onload = function(){
setInterval("rotateimages()", 5000);
}


</script>



<script type="text/javascript" language="JavaScript" src="./code.php"></script>


<body>

<img id="myslides" src="100.jpg">


<!-- <div id="myslides"> -->
  <!--<img src="100.jpg" />
  <img src="101.jpg" /> -->

</body>
</html>

Please tell me how to fix it.