javascript - obtener todas las imágenes en un array desde un directorio y subdirectorios

Actualmente tengo una estructura de árbol similar a la siguiente:

+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>

Como soy extremadamente nuevo en PHP, estoy viendo a ciegas que se registra como Array() en la consola.

Además, he configurado $directory="images/*/"; lo que obtendrá todas las imágenes dentro de las subcarpetas únicamente, pero no obtiene las imágenes dentro del directorio principal que probablemente sea images/some-image.jpg y también quería obtener esto.

Quiero todas las imágenes en un arreglo así (cuando uso console.log(allImages);):

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

Respuesta #1

Me encanta JSON, mantiene las cosas agradables y simples:

<?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>

Ahora tienes el array de PHP disponible en JavaScript, con la misma estructura. Puedes recorrerlos con un for, o si tienes jQuery, $.each().
Cambié un código más a tu estilo (mezclando PHP y HTML), pero deberías intentar dividir esos en plantillas HTML.

No estoy 100% seguro de esto, pero puedes usar expresiones regulares en tu glob; si esto funciona, no necesitas el foreach, esto devolverá solo los nombres de los archivos:

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

Respuesta #2

¿Qué hay de esto:

<script>

<?php

$directory = "images/*/";

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

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

?>

console.log(allImages);

</script>