Using PHP to send photo URLs to JavaScript - php

Question

I am helping my friend with his photo website oneonethousand.org. He wants the photo gallery to be generated automatically from the photos he places in a directory. I am not experienced with Ajax and think it might be too complex to use for this.
What I think would be best is to use PHP to identify the URLs of the photos in a directory and somehow send those URLs to JavaScript so that JavaScript can pre-load them and then display them when the corresponding photo button is selected on the site.
I know PHP and JavaScript (JQuery) relatively well, but I'm just not quite sure what the Best Practice is for what I need to do.
Just to reiterate: What he wants to do is place the photos in the directory, PHP searches that directory for the photo names, and passes those URLs to JavaScript so it can pre-load them.
How do you recommend going about this?

Answer 1

I would probably use AJAX to do this, but you certainly don't have to. In your page that is loaded by the browser, you can make PHP print Javascript, like so:
$HTML = '<script type="text/javascript">' . "\n";
$HTML .= 'var ImageCache = [];' . "\n";
foreach (glob('Path/To/Images/*.jpg') as $Image))
{
$HTML .= 'ImageCache.push("' . $Image . '");' . "\n";
}
$HTML .= 'for (var i in ImageCache) {' . "\n";
$HTML .= "\t" . 'var Source = ImageCache[i]; ' . "\n";
$HTML .= "\t" . 'ImageCache[i] = new Image(100, 100);' . "\n";
$HTML .= "\t" . 'ImageCache[i].src = Source;' . "\n";
$HTML .= '}';
$HTML .= '</script>';

Answer 2

You'd generally use a function like glob to get a list of all of the image files, then embed links to them in the page either directly, or using javascript as you suggested.
Something like this ...
$files = glob("/image/dir/*.{jpg,jpeg,gif,png}", GLOB_BRACE);
$js = "var images = new Array();\n";
foreach( $files as $i => $file ) {
$fileName = basename($file);
$js .= "images[$i] = '$fileName';\n";
}
Adding the $js as Javascript to your page will get you a list of the image names, client-side, which you can use as you see fit.

Answer 3

To transer data from PHP to javascript you can use XMLor JSON.
PHP provides functions and classes for both.
Using JSON is very simple
For more details about PHP and JSON see http://www.php.net/manual/en/book.json.php
For information about decoding the data in JavaScript read this http://json.org/js.html
EDIT:
If you generate your javascript in php you can encode a an array in JSON and use the generated code to declare a JavaScript array.
echo <<<END
<script>
...
var images = {$JSONEncodedArray};
...
</script
END;

Answer 4

Just dynamically generate a part of your JavaScript file with PHP, like so:
var slideshowImages = [<?php
$files_in_folder = /* get the files somehow */;
foreach($files_in_folder as $file) {
echo "\"$file\",";
}
?>null]; // Make sure to skip the last element
You might need to give your .js file a .php extension, if it is in fact a separate file.