Amped about Web Standards

When I set out to add database driven player info at NuggetsHoops.com, I knew that I wanted to include code that would display some of the many images that I had set aside for each NBA player. I also knew that I would continue to add new pictures. Application code that could easily display old and new images, without additional effort for each added image would work best.

I had already written PHP code that could look at a folder and create a list of images to be displayed. When I ran across the powerful jQuery Cycle Plugin, I had found a great way to display them.

Let’s get coding. This tutorial depends on PHP 5, jQuery 1.2.3 or later, jQuery Cycle Plugin version 2.51 or later.

• I’ll assume you already have Apache and PHP setup and running. Make sure you have a recent version of PHP 5.
• Download jQuery
• Download jQuery Cycle Plugin

Add the following Javascript to your PHP/HTML to enable and call the Cycle Plugin:

 javascript | 
 copy code |
?
 
1
<script src="/scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
2
<script src="/scripts/jquery.cycle.all.min.js" type="text/javascript"></script>
3
<script type="text/javascript">
4
$(document).ready(function(){
5
	$('#myslides').cycle({
6
		fit: 1
7
	});
8
});
9
</script>

Note that there are many options and styles of animation provided by the powerful Cycle plugin.

Add the following PHP to iterate over any folder and dynamically generate img tags using any images found in the folder:

 php | 
 copy code |
?
 
01
$directory = 'images/players/' . $row['imageName']; 
02
try {    
03
	// Styling for images
04
	echo "<div id=\"myslides\">";
05
	foreach ( new DirectoryIterator("../" . $directory) as $item ) {			
06
		if ($item->isFile()) {
07
			$path = "/" . $directory . "/" . $item;
08
			echo "<img src=\"" . $path . "\" />";
09
		}
10
	}
11
	echo "</div>";
12
}
13
catch(Exception $e) {
14
	echo 'No images found for this player.<br />';
15
}

Any img tags within an HTML element of class ‘myslides’ (or whatever you initialized the Cycle plugin with in the Javascript) will have the slideshow behavior added to it. The $row array on line 1 is referencing a database query result, but could be set in a number of ways for your specific needs. The DirectoryIterator reference on line 5 is a builtin class in PHP5.

Here’s the CSS to style the images being displayed in the slideshow:

 css | 
 copy code |
?
 
01
#myslides {
02
width: 340px;
03
float: right;
04
        padding: 0;
05
        margin:  0 auto;
06
margin-top: 20px;
07
} 
08
 
09
#myslides img {
10
    padding: 10px;
11
    border:  1px solid rgb(100,100,100);
12
    background-color: rgb(230,230,230);
13
    width: 320px;
14
    top:  0;
15
    left: 0
16
}

So, there’s a very quick walk thru a working example to generate a dynamic slideshow from any folder of images. If you’d like a full download of the code, or any further explanation, please leave a comment!

You can see this code in action by just clicking on any player’s name at the NuggetsHoops.com Roster page.

New – download the code for this Tutorial

Demo