Fade In & Out the Most Recent Pictures in a Directory with jQuery

Dave in Michigan contacted me and wanted to know if it was possible to take the script used from this previous post and only display the last X number of pictures uploaded to a directory.

Something to note before you get started though. The script will read the entire directory so if you have a lot of images (more than 1,000) the page will load very slow. (if anyone has a good way to read a directory recursively based on filetime, please let me know)

Requirements:

PHP
jQuery
InnerFade plugin (see docs for variables explanations and additional vars)

$image_dir = "$_SERVER[DOCUMENT_ROOT]/examples/imgs"; // directory on server
$image_relative_path = '/examples/imgs'; // path to images relative to script
$file_types = array('jpg','jpeg','gif','png');
$image_time = '4000'; // seconds each image will display (4000 = 4 seconds)

if($handle = opendir($image_dir)) {
  while (false !== ($file = readdir($handle))) {
    if ($file != "." && $file != "..") {
      $ext_bits = explode(".",$file); // finds file extensions
      foreach($ext_bits as $key => $value){
        if(in_array($value,$file_types)){
          $image_rotation .= '<li><img src="'.$image_relative_path.'/'.$file.'">';
        }
      }
    }
  }
  closedir($handle);
}

// example.php
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="/js/jquery.innerfade.js"></script>
<script>
$(document).ready(function() {
    $('#image_rotate').innerfade({
        speed: 'slow',
        timeout: ,
        type: 'sequence',
        containerheight: '220px'
    });
});
</script>

<ul id="image_rotate" style="list-style: none;">
	<?= $image_rotation; ?>
</ul>

View combined code