preloading a directory of images

I'm trying to combine two scripts I found online to make a preloader for all the images in a folder. The javascript part works when you manually enter in a list of images, so I was trying to make a php array to get all the names of the images in one directory, then use that to list them. Maybe I'm going about it all wrong but it is not working. Here's what I tried:

<?php
function dirList ($directory)
{

// create an array to hold directory list
$results = array();

// create a handler for the directory
$handler = opendir($directory);

// keep going until all files in directory have been read
while ($file = readdir($handler)) {

// if $file isn't this directory or its parent,
// add it to the results array
if ($file != '.' && $file != '..')
$results[] = $file;
}

// tidy up: close the handler
closedir($handler);

// done!
return $results;

}
?>


<script type="text/javascript">
<!-- begin hiding

// You may modify the following:
var locationAfterPreload = "page.php" // URL of the page after preload finishes
var lengthOfPreloadBar = 300 // Length of preload bar (in pixels)
var heightOfPreloadBar = 2 // Height of preload bar (in pixels)
// Put the URLs of images that you want to preload below (as many as you want)
Next line is where I'm messing it up i guess:
var yourImages = new Array(<?php echo $results; ?>)

// Do not modify anything beyond this point!
if (document.images) {
var dots = new Array()
dots[0] = new Image(1,1)
dots[0].src = "white.gif" // default preloadbar color (note: You can substitute it with your image, but it has to be 1x1 size)
dots[1] = new Image(1,1)
dots[1].src = "black.gif" // color of bar as preloading progresses (same note as above)
var preImages = new Array(),coverage = Math.floor(lengthOfPreloadBar/yourImages.length),currCount = 0
var loaded = new Array(),i,covered,timerID
var leftOverWidth = lengthOfPreloadBar%coverage
}
function loadImages() {
for (i = 0; i < yourImages.length; i++) {
preImages[i] = new Image()
preImages[i].src = yourImages[i]
}
for (i = 0; i < preImages.length; i++) {
loaded[i] = false
}
checkLoad()
}
function checkLoad() {
if (currCount == preImages.length) {
location.replace(locationAfterPreload)
return
}
for (i = 0; i <= preImages.length; i++) {
if (loaded[i] == false && preImages[i].complete) {
loaded[i] = true
eval("document.img" + currCount + ".src=dots[1].src")
currCount++
}
}
timerID = setTimeout("checkLoad()",10)
}
// end hiding -->
</script>


THEN IN THE BODY:

<p>Loading images...</p>

<script type="text/javascript">
<!-- begin hiding

if (document.images) {
var preloadBar = ''
for (i = 0; i < yourImages.length-1; i++) {
preloadBar += '<img src="' + dots[0].src + '" width="' + coverage + '" height="' + heightOfPreloadBar + '" name="img' + i + '">'
}
preloadBar += '<img src="' + dots[0].src + '" width="' + (leftOverWidth+coverage) + '" height="' + heightOfPreloadBar + '" name="img' + (yourImages.length-1) + '">'
document.write(preloadBar)
loadImages()
}

// end hiding -->
</script>



Any ideas of how I could make it work?

Thanks!

you could just create a string for the array


function dirList ($directory)
{

// create array content for javascript


// create a handler for the directory
$handler = opendir($directory);

// keep going until all files in directory have been read
while ($file = readdir($handler)) {

// if $file isn't this directory or its parent,
// add it to the results array
if ($file != '.' && $file != '..')
if(!isset($results)){
$results = '"'.$file.'"';
}else{
$results .= ', "'.$file.'"';
}

// tidy up: close the handler
closedir($handler);

// done!
echo $results;

}



<script type="text/javascript">
img_array = new Array(<?dirList($directory)?>);
</script>

Sorry, I'm a bit thick, where would that bit of javascript then go into the preloader script?

function dirList ($directory) {
$handler = opendir($directory);
while ($file = readdir($handler)) {
if ($file != '.' && $file != '..') echo "<div style='display: none'>$directory/$file</div>";
}
closedir($handler);
}

You can then toggle the images off and on with javascript.

it would be the 'preImages' array

Alternately, if you want to make sure they only load at images...

function dirList ($directory) {
$handler = opendir($directory);
while ($file = readdir($handler))
if (strcasecmp(substr($file, -3), "jpg") == 0)
echo "<div style='display: none'>$directory/$file</div>";
closedir($handler);
}