External JavaScript and PHP to rotate through folder of images

Question

I'm trying to use Javascript and PHP to read a folder of images and cycle through the images. I got the idea and code from here: http://www.javascriptkit.com/javatutors/externalphp2.shtml

I'm not getting any errors even with Firebug up. But it's just not cycling through the images. It loads the first image that I set (userfiles/portfolio/0025.jpg). But doesn't ever move to another image.

The getimages.php is located in userfiles/portfolio along with my images.

Here's what I have:

On the page I want to display the images:

<script src="userfiles/portfolio/getimages.php"></script>

<script type="text/javascript">

var curimg=0
function rotateimages(){
document.getElementById("slideshow").setAttribute("src", "userfiles/portfolio/"+galleryarray[curimg])
curimg=(curimg<galleryarray.length-1)? curimg+1 : 0
}

window.onload=function(){
setInterval("rotateimages()", 1000)
}
</script>

<div id="portfoilo">
    <img id="slideshow" src="userfiles/portfolio/0025.jpg" />
</div>

and here is my getimages.php

 <?php
//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=".") {
    $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 .'";';
            $curimage++;
            }
        }

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

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

getimages.php was showing up blank when I ran it. However now I'm getting:

<font size='1'><table class='xdebug-error xe-deprecated xe-scream' dir='ltr' border='1' cellspacing='0' cellpadding='1'>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> SCREAM: Error suppression ignored for</th></tr>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Deprecated: Function eregi() is deprecated in J:\My Documents\Dropbox\www\ChiseledImages-Ras\userfiles\portfolio\getimages.php on line <i>13</i></th></tr>
<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>
<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>
<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0014</td><td bgcolor='#eeeeec' align='right'>248760</td><td bgcolor='#eeeeec'>{main}(  )</td><td title='J:\My Documents\Dropbox\www\ChiseledImages-Ras\userfiles\portfolio\getimages.php' bgcolor='#eeeeec'>..\getimages.php<b>:</b>0</td></tr>
<tr><td bgcolor='#eeeeec' align='center'>2</td><td bgcolor='#eeeeec' align='center'>0.0015</td><td bgcolor='#eeeeec' align='right'>249536</td><td bgcolor='#eeeeec'>returnimages(  )</td><td title='J:\My Documents\Dropbox\www\ChiseledImages-Ras\userfiles\portfolio\getimages.php' bgcolor='#eeeeec'>..\getimages.php<b>:</b>26</td></tr>
</table></font>

Is eregi completely gone now? I know it was being deprecated after 5 and my WAMP version is running php 5.4.3.

Answer 1

Just a quick glance of your code, but you should probably change this:

setInterval("rotateimages()", 1000)

to this

setInterval(rotateimages, 1000);

This is because you're telling Javascript to run a specific function after 1 second. So you'll need to pass in something that is callable like a function reference or an anonymous function block. In your case, you're passing in a string which is not callable.