linein designs

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:

  1. PHP
  2. jQuery (latest version)
  3. InnerFade plugin (see docs for variables explanations and additional vars)

View Source Code

// 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 .= '
  • '; ++$count; if($count > $max_pictures){break;} }
    
    
    
    
      < ?= $image_rotation; ?>

    Similar Posts:

    4 Comments »

    Comment by Daniel Pape

    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

     
    Comment by Bridgette

    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.

     

    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!!

     
    Name (required)
    E-mail (required - never shown publicly)
    URI
    Your Comment (smaller size | larger size)
    You may use <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> in your comment.

    Trackback responses to this post



    Please Support Our Friends

    Banner
    FreshBooks

    About

    My name is John Veldboom and have been in design and web programing for just over 8 years now. Started off as a hobby in high school but it has developed into a full time job now. I always tell people that if I wasn't doing this at work each day, I would be at home doing it for free. I love it!

    Please visit the contact page to drop me a message.