Using PHP to send photo URLs to JavaScript

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?

You can see an example gallery here oneonethousand.org/photographers/traviesa — Ben B.
– Ben B., Commented Apr 16, 2011 at 22:57
I'm not sure what the question here is. Are you asking if it's a good idea to do such a thing? I'd say it's a valid approach the only problem is that you probably don't want to load all the images in a directory simultaneously; you'll likely want to generate thumbnails. — Artefacto
– Artefacto, Commented Apr 16, 2011 at 22:58

Zach Rattner · Accepted Answer · 2011-04-16 23:08:41Z

2

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>';

answered Apr 16, 2011 at 23:08

Zach Rattner

21.5k10 gold badges63 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Ben B. Over a year ago

Okay. Teaching moment - I'm not really clear on what "$HTML .= " does... is $HTML just a normal variable or is that like using echo? Forgive me... my PHP knowledge is limited... I generally just use echo and do simple things.

Ben B. Over a year ago

OH... ".=" is adding that code to the variable and then I would do "echo $HTML" right?

Zach Rattner Over a year ago

The .= means concatenation. $HTML .= 'a'; is the same thing as $HTML = $HTML . 'a'; It will add 'a' to the end of the existing $HTML string.

Ben B. Over a year ago

How would I do this with Ajax?

Zach Rattner Over a year ago

First off, I would recommend the use of a Javascript library such as JQuery to do the AJAX call for you. When the page loads, you'd initiate the AJAX call. The PHP script that gets invoked would do the globbing and return a list of strings to you. The Javascript that handles the response would then do the same thing as the original post-- create an array of Image objects and set their sources.

|

Jeff Parker · Accepted Answer · 2011-04-16 23:09:03Z

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.

answered Apr 16, 2011 at 23:09

Jeff Parker

7,5671 gold badge24 silver badges25 bronze badges

Comments

Oliver A. · Accepted Answer · 2011-04-16 23:09:00Z

1

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;

answered Apr 16, 2011 at 23:09

Oliver A.

2,9002 gold badges20 silver badges21 bronze badges

Comments

Ry- · Accepted Answer · 2011-04-16 23:11:21Z

1

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.

answered Apr 16, 2011 at 23:11

Ry-♦

226k56 gold badges496 silver badges504 bronze badges

2 Comments

Ben B. Over a year ago

I didn't know I could do php inside of javascript! Whats the " [ " for?

Ry- Over a year ago

[] is literal syntax for arrays. So ["one", "two"] is equivalent to new Array("one", "two").

Collectives™ on Stack Overflow

Using PHP to send photo URLs to JavaScript

4 Answers 4

7 Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related