$1.99 Includes working source code with images, style sheet and javascript.
One of my favorite free jQuery slideshow scripts is Nivo 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 nivo slider.
2) Reads the picture metadata and adds it to the Nivo script
- Metadata: Title becomes the Nivo Image Alt Tag
- Metadata: Subject becomes the Nivo Image Link URL
- Metadata: Comments becomes the Nivo Caption
nivoexample.php
<!--
//----------------------------------------------------
// Nivo Slider Enhancement
// 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 the nivo slider script
//----------------------------------------------------
-->
<body>
<div id="wrapper">
<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
<div id="slider" class="nivoSlider">
<?php
//This php code will generate your list of images based on
//image files in a folder
$dirpath = "slideshow";
$dirURL = "http://www.jazzerup.com/blogexamples/slideshow/";
$folder = opendir($dirpath); // Use 'opendir(".")' if the PHP file is in the same folder as your images. Or set a relative path 'opendir("../path/to/folder")'.
$pic_types = array("jpg", "jpeg", "gif", "png");
$alttag = ""; //caption
$websiteurl= ""; //alt tag
$caption = ""; //website url
$index = array();
while ($file = readdir ($folder)) {
if(in_array(substr(strtolower($file), strrpos($file,".") + 1),$pic_types))
{
$items[] = $file;
}
}
for($i=0; $i<sizeof($items); $i++) {
$picpath = $dirpath . "/" . $items[$i];
//Get the meta data
$exif = exif_read_data($picpath, 'EXIF');
$alttag = $exif['Title']; //alt tag
$websiteurl= $exif['Subject']; //website url
$caption = $exif['Comments']; //caption
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 /></a>" . "\n\n" ;
} else {
$varimages = $varimages . " <img src='$picpath' $alt $caption />" . "\n\n" ;
}
$alttag = ""; //caption
$websiteurl= ""; //alt tag
$caption = ""; //website url
}
closedir($folder);
$varimages = substr_replace($varimages ,"",-1);
echo $varimages;
?>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
</body>
Updating Metadata in a file is very easy. On windows:
- Right click on the file
- Select Properties
- Select the "Details" tab
- Update Title, Subject and Comments and press "Okay"
