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:

    2 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

     
    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


    • Seren: Thanks - google did not fail me in finding this snippet (after 2 hours of 'why isn't this working!' before I choose to look for answers. That select
    • zdenis: type your scp command with nohup at the beginning: >nohup scp... enter your password stop temporarily the command with CTRL+z put on b
    • Criz: php script >> How to get the number of hours and minutes of a two set of time like this sample. 1st set of time : 8:00 to 17:00 2nd set of


    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.