Question

I am trying to make an HTML5 slideshow system that implements PHP. My idea begins with making a system that detects the images in a folder, and puts them in an array, which the jquery will then be able to access for implementation in the slideshow. Firstly I have a php file that will detect the names of every file in the folder, and output them as plain text.

How, instead of outputting as plain text, can i make the PHP transfer the file names to a numerical array, which can be used with the jquery that will then accompany it?

I intend to use jquery to access the numerical array that is then made. How is this done? Unless it is not possible to do, and so how else can it be done?

The goal is to be able to put files in a folder, and for the scripting to dynamically recognize the presence of files, and incorporate them in a slideshow. This slideshow will then be output to a screen display which will be used in a waiting area, showcasing our school with a slideshow of images about the school.

Here is the code that I have so far:

<?php
    //Open images directory
    $dir = opendir("images");
    //List files in images directory
    while (($file = readdir($dir)) !== false)
    {
        echo "filename: " . $file . "<br />";
    }
    closedir($dir);
?>

At this point I do not know how to make PHP “talk” with Javascript. I hope that there is some simple method for this, what I think I’m going for is AJAX, but I have no idea how this works.

Answer 1

The answer here is to use JSON, a subset of Javascript supported by many languages that allows you to (amongst many other things) very easily pass structured data into Javascript from external sources. PHP has a function json_encode() which allows you convert PHP data structures – usually arrays or objects – into a format the Javascript can easily read. jQuery also has built-in support for JSON.

<?php

    // An array of the image file names
    $images = array();

    //Open images directory
    $dir = opendir("images");

    //List files in images directory
    while (($file = readdir($dir)) !== false)
    {
        $images[] = $file;
    }
    closedir($dir);

    echo json_encode($images);

?>

Now, in jQuery you can do this:

$.getJSON('http://url/of/your/script.php', function(images) {
  // In here the variable "images" is an array identical to the one you constructed with PHP
});