Currently I've similar to the following tree structure:

+images
    +sub-directory
       -image1.jpg
       -image2.jpg
    +sub-directory-2
       -image3.jpg
       -image4.jpg
    -some-image.jpg
    -another.jpg

<script>
<?php
//path to directory to scan. i have included a wildcard for a subdirectory
$directory = "images/*/";

//get all image files with a .jpg extension.
$images = glob("" . $directory . "*.jpg");

$imgs = '';
// create array
foreach($images as $image){ $imgs[] = "$image"; }
echo "var allImages = ".$imgs.";\n";
?>

console.log(allImages);
</script>

As I'm extremely new to php, I'm blindly getting logged as Array() in the console.

Also, I've set $directory = "images/*/"; which will get all images inside the subfolders only but not getting images inside parent directory that likely to images/some-image.jpg and I wanted to get this too.

I want all the images in an array like this (when I use console.log(allImages);):

['some-image.jpg','another.jpg','image1.jpg','image2.jpg','image3.jpg','image4.jpg']

Currently I've similar to the following tree structure:

+images
    +sub-directory
       -image1.jpg
       -image2.jpg
    +sub-directory-2
       -image3.jpg
       -image4.jpg
    -some-image.jpg
    -another.jpg

<script>
<?php
//path to directory to scan. i have included a wildcard for a subdirectory
$directory = "images/*/";

//get all image files with a .jpg extension.
$images = glob("" . $directory . "*.jpg");

$imgs = '';
// create array
foreach($images as $image){ $imgs[] = "$image"; }
echo "var allImages = ".$imgs.";\n";
?>

console.log(allImages);
</script>

As I'm extremely new to php, I'm blindly getting logged as Array() in the console.

Also, I've set $directory = "images/*/"; which will get all images inside the subfolders only but not getting images inside parent directory that likely to images/some-image.jpg and I wanted to get this too.

I want all the images in an array like this (when I use console.log(allImages);):

['some-image.jpg','another.jpg','image1.jpg','image2.jpg','image3.jpg','image4.jpg']

• javascript
• php

• How far deep to the sub-directories go? I ask because if they are not very deep, there are several recursive glob functions on the php glob manual page. If it is fairly deep, then maybe look at using exec with find which will likely give you a faster result. – Jonathan Kuhn Commented Dec 9, 2014 at 19:59
• @JonathanKuhn Currently I've no much deeper sub-directories and would be okay with it. – Bhojendra Rauniyar Commented Dec 9, 2014 at 20:00

3 Answers 3

I love JSON, keeps things nice and simple:

<?php
$images = glob("images/*/*.jpg");
$imgs = array();
foreach($images as $image){ $imgs[] = $image; }
?>
<script>
    var allImages = JSON.parse('<?php echo json_encode($imgs);?>');
    console.log( allImages);
</script>

Now you have the php array available in javascript, with the same structure. You can loop them with a for, of if you have jQuery, $.each().
I changed a code more to your style (mixing php and html), but you should try to split those in htmltemplates.

Im not 100% sure about this, but you can regex in your glob, if this works you don't need the foreach, this will return only the filenames:

$images = glob("~(?:images/*/)*\.jpg~");

What about this:

<script>

<?php

$directory = "images/*/";

$images = glob("" . $directory . "*.jpg");

echo "var allImages = ['".implode("', '", $images)."'];\n";

?>

console.log(allImages);

</script>

How about a recursive function?

function loadImages($folder)
{
    $files = glob($folder);
    foreach( $files as $file )
    {
        if(is_dir($file))
        {
            loadImages($file);
        } else {
            $images[] = $file; // add some file type validation here
        }
    }

    return $images;
}

$images = json_encode(loadImages($startFolderPath));

I'm on an iPad so I can't test it.