JavaScript JQuery Slideshow(the other half)

[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 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();
           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 .'";' . "\


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


My html file:


<meta http-equiv="refresh" content="1000"/> 
<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 
<!-- include jQuery library -->

<script type="text/javascript" src=""></script>

<!-- include Cycle plugin -->
<script type="text/javascript" src=""></script>

<script type="text/javascript">
               fx: 'fade',
				speed: 5000,
				timeout: 2000

<script type="text/javascript">

var curimg=0;
function rotateimages(){
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 type="text/javascript" language="JavaScript" src="./code.php"></script>


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

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


Please tell me how to fix it.

There are so many things wrong with this code, but you cannot mix php/javascript the way you are doing it, unless you also echo: “<script>…” over the Javascript. Plus, why do you create a function with a parameter when you pass no argument in you function call?

im just beginning to learn php/javascript
Can you please fix my code? //or if you think this code is beyond fixing suggest a better way.

As long as my code reads the contents of folder and i can have animation (fade) between them It dossent matter what language or approach you want to use.