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!
Was this post helpful? You can help me by buying me a beer :-)Tags: ajax, javascript, jquery, php, slideshow
Kevin,
I am just learning PHP and found your code. I want to do something similar on a website, (not on go2cas.com – I didn't create that), but a personal one, so I thought I would try it.
I have been at it for 3 days – I've downloaded several debuggers, but cannot get the getimages.php file to run – I'm testing on a WAMP server on my laptop. This is the error I get:
Parse error: parse error, expecting `')" in C:\wamp\www\jquerytest\php\getimage.php on line 5
I tried typing it in the debugger file one line at a time – on line 5 it wanted a second " – so I put that in. Then the file was fine until I got to the end and it said: Unexpected EOF . Expected variable ${. I was hoping you could shed some light on this – if you can take a minute, I would appreciate it.
The photos on your site are awesome.
Regards,
Mary Ann Gerney
Apparently wordpress (the software this blog is using) transforms my ' and " quotes into italic quotes: “`’” . So if you're copying the code you'll have to do a search/replace for these characters.
How many files did you create for this example(html, php and js)? where did you put them? I think I get most of the exercise, however, I can´t seem to get it working because I think I place de PHP in the wrong place. Could you please clarify this. Thanks.
Very cool site btw.
Miguel, I'm using the rotating images within the Code Igniter framework so the code is a little different. I did notice a few bugs in the code of my posts (should be fixed now), but I also added a link to a zip file that has a working, stripped down app. (at http://www.kevindubois.com/blog/attachments/rotate_images.zip). That should help you get everything set up. Let me know if you still have questions!
Kevin
I made it!! after a few hours of tinkering (sometimes desperate tinkering, je,je,je), I got it!!!
I thought the code had some bugs (I can see you corrected those), so I took the liberty of watching the "working code" from your site (via Firefox-Firebug), and basically went comparing from there.
The thing that had me most was writing the correct path for the images. Basically considering where the Jquery is read and passing down the correct path in the $return.
Anyway I see billions of possibilities combining this code with Drupal, "CCK" and "VIEWS" modules.
Thanks for everything, reallly useful stuff.
Best regards from Costa Rica.
Miguel
This is just what I have been looking for. Thank you for reading my mind and making such a great tutorial.
Cheers,
Matt
Any tips on making this display 3 images in a row from that directory? And being sure not to repeat the same image in the 3 displayed. Or to at least make this work with 3 images each randoming from 1 of 3 image folders?
Dax
Dax, I'm not sure what you mean, can you elaborate on that a little bit?
Hey I have one question regarding link to an image. How can I give link to these rotating images?
Alex, If you want to add a link from each slide you'll most likely need to save the image file locations together with a corresponding link into an array or database. That's kind of out of the scope of this tutorial. I did write another slideshow with that functionality, if I have a some time this week I'll post it in another article.
I am also looking out similar kind of functionality, link to rotating images, Kevin can you please let me know whenever you upload the new article.
Thanks in advance.
I wrote a new article for database driven slideshows: http://kevindubois.com/blog/2009/07/29/database-driven-jquery-rotating-slide-show-with-text-navigation-and-links-using-the-cycle-plugin/
Hey,
Thanks for this slideshow. This is just what I have been looking for.
Just one thing:
funktion getfiles has two paramters: $folder and $extensions
What could stay in $extensions.
I would need the read out the filename. Is it maybe posibly to read the filename out and put him on the top of the image?
Thanks in advance.
This is perfect for what I need, except I need to have images resized to fit within a specific size. I can change the box size, but this just crops the images, instead of resizing. Any way to do this?
One more question. It looks like if there are non image files in the folder that has the images, the script fails. Any way to have the script ignore non image files? Maybe just a list extensions that are valid?
@Pingitzer: since we're returning a string of all image paths to ajax it would be hard to parse this. Take a look at the other more advanced slideshow tutorial in my blog (link is at the top of this article), that will probably be more suited.
Austin, resizing the images is kind of out of the scope of this article – you'll want to resize the images before you upload them to the folder. As for filtering only image files out of the folder, you can modify the following line to look for only jpg, gif, png etc in the last 3 characters of the string:
if (!preg_match('/^\.+$/', $file) and preg_match('/\.('.$extensions.')$/', $file)){
Hi Kevin and thank you for this great script
i have some hard time with it.
i'm trying to use it in a CMS MS website.
i did everything well (i thought), i think all my url are good..
but i have all those errors :
string(122) "Smarty error: [in tpl_head:24 line 18]: syntax error: unrecognized tag: loadImage(); (Smarty_Compiler.class.php, line 446)" string(111) "Smarty error: [in tpl_head:24 line 18]: syntax error: unrecognized tag " (Smarty_Compiler.class.php, line 590)" string(436) "Smarty error: [in tpl_head:24 line 20]: syntax error: unrecognized tag: // 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 (Smarty_Compiler.class.php, line 446)" string(111) "Smarty error: [in tpl_head:24 line 20]: syntax error: unrecognized tag " (Smarty_Compiler.class.php, line 590)"
a LOT right? if you have any idea where i can search to fix it.
Thank you
You may need to give me more information but it sounds like you may need to set your variables in the php and/or the smarty template file. Does that help?