22 Oct, 2010
Fade in and Out the Most Recent Pictures in a Directory with jQuery
Posted by: john In: javascript|jquery|php|tutorial
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 (latest version)
- InnerFade plugin (see docs for variables explanations and additional vars)
// Global Variables
$image_dir = "$_SERVER[DOCUMENT_ROOT]/imgs"; // directory on server
$image_relative_path = '/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)
$max_pictures = 6; // 0 = show all
$sort = 'desc'; // desc = descending, or leave empty for no sort
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)){
$filetime = filemtime($image_dir.'/'.$file);
$image_array[$filetime] = $file; // file creation time is the key
}
}
}
}
closedir($handle);
}
if($sort == 'desc'){krsort($image_array);} // reverse sorts array by key
$count = 1;
foreach($image_array as $key => $value)
{
$image_rotation .= '
-
< ?= $image_rotation; ?>
Similar Posts:
- jQuery Image Gallery with Transitions and Navigation
- Fade In and Out Images from a Single Directory Using jQuery (with plugin)
- Rotate Images with jQuery and PHP
- jQuery Loading – Display Images or Text Until Script is Finished
- PHP File Last Modified and Filesize (bytes to KB/MB)


February 7th, 2011 @ 1:01 am
This is great! Exactly what I was wanting. I have done PHP based image rotators that change on page refresh, but this time I was needing a slideshow type look.
One question. I have having trouble with my navigation menu displaying behind the slideshow. The usual z-index css is not helping. Appreciate your ideas.
My page is http://blackthumbphoto.com/dev/index.php