jQuery Carousel - 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 Carousel Lite
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
carouselexample.php
//----------------------------------------------------
// jQuery Carousel 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 jQuery Carousel Script
//----------------------------------------------------
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="js/jcarousellite_1.js" type="text/javascript"></script>
</head>
<body>
<!-- Carousel -->
<div id="carousel"> <a href="#" title="Previous" class="prev">Previous</a> <a href="#" title="Next" class="next">Next</a>
<div style="visibility: visible; overflow: hidden; position: relative; z-index: 2; left: 0px; width: 864px;" class="content">
<ul style="margin: 0pt; padding: 0pt; position: relative; list-style-type: none; z-index: 1; width: 2592px; left: -864px;">
<?php
//Relative path to yout image directory
$dirpath = "../slideshow";
//Website URL to that same image directory
$dirURL = "http://www.jazzerup.com/blogexamples/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
$varimages = $varimages . "<li style='overflow: hidden; float: left; width: 216px; height: 136px;'>";
//Build the html code based on the metadata
$varimages = $varimages . " <img src='$picpath' height='120' width='200' style='border:3px solid #FFF;' alt='$alttag' />" . "\n\n" ;
$alttag = "";
$websiteurl= "";
$caption = "";
$varimages = $varimages . "</li>";
}
closedir($folder);
echo $varimages;
?>
</ul>
</div>
</div>
<!-- [END] Carousel -->
<script type="text/javascript">
$(window).load(function() {
$("#carousel .content").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
speed: 800,
visible: 4
});
});
</script>
</body>
Comments (0)