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:

$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);  
}
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">  
<script type="text/javascript" src="/js/jquery.innerfade.js">  
<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

If you have any questions about this, please leave a comment.


comments powered by Disqus