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
April 4th, 2013 @ 7:30 am
This is just what I was looking for! Thank you!
My only complaint is that it took me more than 60 minutes with 20 different queries to seek out
your web site. Why is good quality content like this so low ranked in the
search results. It’s total BS I say.
May 7th, 2013 @ 9:30 am
Oh my goodness! Impressive article dude!
Thanks, However I am encountering difficulties with your RSS.
I don’t understand the reason why I am unable to join it. Is there anybody having similar RSS problems? Anyone that knows the solution can you kindly respond? Thanx!!