There are many ways to rotate images on a website. In my case, I needed a way to rotate all images from a particular folder, and I wanted it so that I just have to dump images in the folder in order for the slideshow to pick them up. ** NOTE: if you want a more advanced setup with database driven slides visit my post about database driven slideshows
For this tutorial I'm going to use jQuery's framework and crossSlide, a plugin for jQuery which will allow smooth transitions between the images. If you don't have it already, you can get jQuery at www.jquery.com and the crossSlide plugin at www.gruppo4.com/~tobia/cross-slide.shtml . You'll also have to create a folder with images. You'll get the best result if all images are identical in size.
A working example can be found at duboistechnologies.com .
Download the code here
Ok, first things first: we'll need a placeholder for the images. We'll need to specify a fixed height for this placeholder too, otherwise the content below will be jumping up and down every time a new image is loaded:
<div id="imgcontainer" style="margin:0; width:46em; height:20em;">
<img src="img/ajax-loader.gif" style="margin-top:20%" alt="loading…" id="mainImg" />
</div>
I put an image in the div that will show an icon while the images are loaded…
Next step is to create a php page with some code to get all images from the folder. The getfiles function will get all files and return a string that will be formatted so it can be parsed as separate objects by the javascript eval() function… but that's for later. We just echo this string so our ajax call will pick it up. The only thing you'll need to customize is the 'imagefolder'… change this to whatever the name or path is to your folder:
<?php
echo getfiles('imagefolder');
function getfiles($folder=", $extensions='.*')
{// path:
$folder = trim($folder);
$folder = ($folder == ") ? './' : $folder;// validate folder
if (!is_dir($folder)){ die('invalid folder given!'); }// create files array
$files = array();// open directory
if ($dir = @opendir($folder)){// get all files:
while($file = readdir($dir)){if (!preg_match('/^\.+$/', $file) and
preg_match('/\.('.$extensions.')$/', $file)){// feed the array:
$files[] = $file;
}
}
// close directory
closedir($dir);
}
else {
die('Could not open the folder "'.$folder.'"');
}if (count($files) == 0){
die('No files where found :-(');
}
// shuffle the array so we have a random sequence of images
shuffle($files);$return = ";
foreach($files as $file){
// format the string so we can later parse it into objects in javascript
$return .= "{'src':'{$folder}/{$file}'},";
}
$return = "[".substr($return, 0,-1)."]";// return the string:
return $return;}
?>
What we need to do now is set up an ajax call that gets the string of images the above function found in my images folder. We'll also have to include the jquery and crossSlide packages:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.cross-slide.js"></script><script type="text/javascript">
$(document).ready(function(){loadImage();})function loadImage(){
// getimage.php is the php file that gets my images from the images folder
$.post("getimage.php", function(data){
if(data.length >0) {
// evaluate the string to a group of objects
myObject = eval(data);
// create a slideshow with the image objects and drop them in the placeholder
$('#imgcontainer').crossSlide({sleep:5,fade:2},myObject);
}
});}
</script>
That's all there is to it. This is a great alternative to flash and is much less cpu intensive!