PHP array to jquery

PHP array to jquery

I have a PHP page that grabs images from a directory and puts the file names into an Array.

I can display the images on the PHP page using a foreach loop so I know the PHP is grabbing the file names.

I script src=getImages.php on my web page but cannot get the images in the array.

After a lot of googling I think I need JSON or JSON_encode or JSON implode. But after many iterations of trial and error I'm here asking for help.

I want the image names in the array from the getImages.php to be available to work with in the javascript.

Here's some code snippets.

getImages.php
  2. <?php
  3. $path = 'images/';

  5. function getImages($path) {
  6.     $images = array();
  7.     if ( $images_dir = @opendir($path) ) {
  8.         while ( false !== ($img = readdir($images_dir)) ) {
  9.             if ( preg_match("/(\.gif|\.jpg|\.png|\.jpeg)$/", $img) ) {
  10.                 $images[] = $img;
  11.             }
  12.         }
  13.         closedir($images_dir);
  14.     }
  15.     return $images;
  17. }

  19. $imgList = getImages($path);
  20. ?>
webpage snip:
  2. <section class="roundabout">
  3.       <div class="slide">
  4. <script src="getImages.php"></script>
  5. <script>
  6. var x= $(".slide");
  7. function displayImages() {
  8. var i = 0,
  9. len = imgList.length;        
  10. for (; i < imgList.length; i++) {
  11.                                     x.append("<article><a href='" + imgList [i] + "'><img class='image featured' src='" + imgList[i] + "'></a></article>");
  12.                                    } 
  13. };
  14. $(function() {
  15. displayImages();
  16. });
  17. </script>
  18. </div>
  19. </section>
Thank you in advance!
bh