JavaScript, PHP Array help for Webcam Images,

I really did not want to have to post but I am at my wits end.

I have a camera that I will be using to show visitors the current weather conditions.

I have a powershell script saving snapshots from the camera and PSFTP uploading them to my ftp. The files names are as follows 'MMddyyyyhhmmss'HBGCWeatherCam.jpeg.

These files reside in the /images folder

Request: I need to read all of the files in the images folder, sortby date in descending order, then pass it to my javascript array called by 'var images = [], x = -1;'

But for the life of me I can't seem to get it to work.

Any help would be greatly appreciated.

EDIT-- Below is the full working Code, MANY Thanks to Digital_Chris

<html>
   <head>
      <title>Weather Cam</title>
	  


<br/>
<br/>

	  
      <script type = "text/javascript">
          function displayPreviousImage() {
              x = (x === images.length - 1) ? 0 : x + 1;
              document.getElementById("img").src = images[x];
          }

          function displayNextImage() {
              x = (x <= 0) ? images.length - 1 : x - 1;
              document.getElementById("img").src = images[x];
          }

          //function startTimer() {
             // setInterval(displayNextImage, 500);
			 //clearInterval(startTimer);
          //}

		  
		  var images = [], x = -1;
<?php 
	$my_files = glob("images/*.jpeg");
    $counter = 0;
    foreach(array_reverse(glob("images/*.jpeg")) as $file) {
        echo "images[" . $counter . "] = '" . $file . "'; ";
        $counter++;
    }
?>
</script>


   </head>

   <body onload = "displayPreviousImage()">
   <div align="center">
       <img id="img" src="images/loading.gif" style="width: 500px; height: 500px;"/>
	   <br/>
       <button style="width: 100;" onclick="displayPreviousImage()">&#60; Previous</button>
		View Other Snapshots
       <button style="width: 100;" onclick="displayNextImage()">Next &#62;</button>
	   <br/>
	   <button style="width: 100;" onClick="window.location.reload()">View Current</button>
	   </div>
   </body>
</html>

Solution

This answer assumes you have successfully gotten an array of filenames into $my_files:

in your javascript block, you need a php loop over the images:

      var images = [], x = -1;
<?php 
    $counter = 0;
    foreach($my_files as $file) {
        echo "images[" . $counter . "] = 'images/" . $file . "'; ";
        $counter++;
    }
?>
</script>

This will yield output like:

      images[0] = 'images/somefile.jpeg';
      images[1] = 'images/anotherfile.jpeg';
      images[2] = 'images/whateversInTheDir.jpeg';

  </script>