jQuery Slider - Images From Folder

$1.99

Includes working source code with images, style sheet and javascript.

One of my favorite free jquery slideshow scripts is Jquery Looped Slider

The major problem I had with the script is everytime I wanted to add another picture to the slideshow, I had to modify the jquery code to include that image. I wrote a script that will do the following:

1) Automatically lists the image files inside a directory and load them into your jquery carousel.

2) Reads the picture metadata and adds it to the jquery carousel script

• Metadata: Title becomes the Image Alt Tag
• Metadata: Subject becomes the Image Link URL
• Metadata: Comments becomes the Caption

loopedslider_example.php
//----------------------------------------------------
// Looped Slider Example
// Created by Jaz Witham (Jazzerup)
// 2011
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND
// Script reads the image files and 
// image metadata into a looped jquery gallery script
//----------------------------------------------------
<div id="header">
<div id="slider">  
  <div class="container">
    <ul class="slides">
         <?php 
//Relative path to yout image directory
$dirpath = "slideshow";
//Website URL to that same image directory
$dirURL = "http://www.jazzerup.com/blogexamples/loopedslider/slideshow/";
 
$folder = opendir($dirpath);
$pic_types = array("jpg", "jpeg");
$alttag = ""; 
$websiteurl= ""; 
$caption = ""; 
$index = array();
 
//Loop through the images in the directory
while ($file = readdir ($folder)) {
  if(in_array(substr(strtolower($file), strrpos($file,".") + 1),$pic_types))
      {                       
      $items[] = $file;            
    }
}
//each time it loads it shuffles the images
shuffle($items);
for($i=0; $i<sizeof($items); $i++) {
  $picpath = $dirpath . "/" . $items[$i];
  $exif = exif_read_data($picpath, 'EXIF');
  $alttag = $exif['Title']; //alt tag
  $websiteurl= $exif['Subject']; //website url
  $caption = $exif['Comments']; //caption
    $title = $exif['Title']; //title
  $comments = $exif['Comments']; //comments
 
 $varimages = $varimages . "<li><div class='thumbholder'>";
 
 
//Build the html code based on the metadata 
  if ($caption != "") {
    $caption =  "title='" . $caption  . "'";
    $alt = "alt='" . $caption  . "'";
  }
  if ($alttag != "") {
    $alt =  "alt='" . $alttag . "'";
  }
  if ($websiteurl != "") {
    $varimages =  $varimages . " <a href='$websiteurl'><img src='$picpath' $alt $caption width='625' height='254' /></a>" ;
  } else {
  $varimages =  $varimages . " <img src='$picpath' $alt $caption width='625' height='254'  />";
      }
  $alttag = ""; 
  $websiteurl= ""; 
  $caption = ""; 
  $varimages =  $varimages . "</div><div class='txtholder'>
            <h2>$title</h2>
          <p>$comments </p></div></li>";
}
closedir($folder);
 
echo $varimages;
?>
 
 
    </ul>
  </div>
  <ul class="pagination">
 <?php   
 for($i=0; $i<sizeof($items); $i++) {
  echo "<li><a href='#'>$i</a></li>";
 }
    ?>
    </ul>  
  </div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" ></script>
<script src="js/loopedslider.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){     
    $('#slider').loopedSlider({
      autoStart: 8000,
      restart: 0,
      slidespeed: 2000,
      fadespeed: 800
    });  
});
</script>