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:

<script src="/scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="/scripts/jquery.cycle.all.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#myslides').cycle({
		fit: 1
	});
});
</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:

$directory = 'images/players/' . $row['imageName']; 
try {    
	// Styling for images
	echo "<div id=\"myslides\">";
	foreach ( new DirectoryIterator("../" . $directory) as $item ) {			
		if ($item->isFile()) {
			$path = "/" . $directory . "/" . $item;
			echo "<img src=\"" . $path . "\" />";
		}
	}
	echo "</div>";
}
catch(Exception $e) {
	echo 'No images found for this player.<br />';
}

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:

#myslides {
width: 340px;
float: right;
        padding: 0;
        margin:  0 auto;
margin-top: 20px;
} 
 
#myslides img {
    padding: 10px;
    border:  1px solid rgb(100,100,100);
    background-color: rgb(230,230,230);
    width: 320px;
    top:  0;
    left: 0
}

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

Code for Dynamic Image Slideshow with PHP and JQuery (888)

Demo

Web developers need to have a tons of languages and syntaxes in their short term memories – HTML, CSS, Javascript, PHP, MySQL, Microformats, Regular Expressions – its a lot to know and remember.

When I studied for big exams in college, my favorite technique was to create an all encompassing one-page sheet with everything I needed to know for that exam. The act of creating that page was the process of reviewing for the exam, and then I had something to refer to right up until exam time, aid in the memorization.

As web developers trying to keep up with all of the technologies in our toolbox – we need all the help when can get. Dave Child has put together a thorough and impressive set of “cheat sheets” that I highly recommend.

Head on over to Dave’s site addedbytes.com/cheat-sheets to download the ones you need. Print and pin them up next to your monitor for the next time you can’t remember the syntax for the various box model attributes in CSS. If you find them useful, don’t forget to get Dave something from his Amazon wish list as a way to say thanks.

I’ve run an NBA fansite called NuggetsHoops.com since 1995. With equal passions for the Denver Nuggets and web design, I’ve poured a lot of time and effort into the website. Every month, there are more and more “blogs” dedicated to the Denver Nuggets, as their popularity has grown over the past few seasons with the additions of NBA superstars Carmelo Anthony and Allen Iverson to the roster. So, partly to be different, and partly to create interesting web development challenges, I usually focus my fansite on fun features that provide Nuggets fans with information presented in unique and hopefully useful ways.

One of those features is a fairly standard Schedule & Results page that shows how the Nugget fared in every game of the season, along with the remaining games on the season’s schedule. What makes it currently unique is the fact that each remaining game on the schedule is an hCalendar Microformat. A future article will show you exactly how you can take advantage of this feature, but for now, I will assume you know how to utilize Microformats, and you are here to see how to create them as a web developer.

For this example, we are going to access a MySQL database with information about remaining games, then use PHP code to dynamically display it. At the same time we are outputting the dynamic schedule information, we are going to add the very useful hCalendar microformat. The purpose of this article is not to teach you PHP, MySQL, or even CSS – the focus here is a real world example that you can add microformat markup to.

First, let’s perform some date logic to get the current date, then compare it with dates in a schedule database table to get the remaining games for the current season.

<?php
// Display Remaining games
$today = getdate();
$cmpDate = $today['year'] . '-' . $today['mon'] . '-' .
           $today['mday'] . ' ' .
           $today['hours'] . ':' . $today['minutes'];
$monthDisplayed = 0;
 
$sql = "SELECT * from schedule where start_date > '".
        $cmpDate."'";
$result=db_query($sql);
?>

Now we have a list of rows to iterate over and display. This example is already in the middle of an HTML table, so we’re just going to create new tr tags for each remaining game.

<?php
while ($row = mysql_fetch_array($result)) {
  $gameDate = date('D j', strtotime($row['start_date']));
  $gameTime = date('g:i A', strtotime($row['start_date']));
  $gameEnd = date('g:i A',
  strtotime('+2 hours 30 minutes',
            strtotime($row['start_date'])));
  $month = date('F', strtotime($row['start_date']));
 
  $dtstartM = date('Y-m-dTG:i:sO',
                   strtotime($row['start_date']));
  $dendM = date('Y-m-dTG:i:sO',
                strtotime('+2 hours 30 minutes',
                strtotime($row['start_date'])));
 
  if ($month != $currMonth)
    $monthDisplayed = 0;
 
  // Check if we need to display a new month header row
  if (!$monthDisplayed) {
    $currMonth = $month;
    $monthDisplayed = 1;
 
    echo '<tr class="rowHeaderSchedule">';
    echo '<td>' . strtoupper($month) . '</td>';
    echo '<td>OPPONENT</td>';
    echo '<td><div align="left">TIME (MT)</div></td>';
    echo '<td colspan="2">LOCAL TV</td>';
    echo '<td width="6"></td>';
    echo '<td>NAT TV</td>';
    echo '<td>NOTES</td>';
    echo '</tr>';
  }
?>

Let’s gather info about the current game for display to the webpage, and for the hCalendar microformat.

 <?php
  // Check if we are processing an away game
  $subject = $row['subject'];
  $patt = "/.*(@|vs.)(.*)/";
  preg_match($patt, $subject, $opp);
  $opponent = '';
 
  if ($opp[1] == "@") {
    $opponent = 'at ';
    $eventInfo = 'Denver Nuggets ';
    // Do not current have this info in the database
    $eventLocation = ' ';
  }
  else {
    $eventInfo = 'Denver Nuggets vs. ';
    $eventLocation =
     'Pepsi Center loc: 1000 Chopper Cir Denver, CO 80204';
  }
 
  // Append the opponent team name
  $opponent .= $opp[2];
 
  // Check if the current game is broadcast in HD
  if ($row['hdtv'])
    $hdTVimage = '<img src="/images/hdtv_logo_sm.jpg" width="24" height="18" alt="HDTV" />';
  else
    $hdTVimage = '';
?>

Now its time to create each remaining row in the schedule – and finally we get to create an hCalendar microformat. First, I’ll show you the code, without the hCalendar markup, for comparison.

<?php
  // Game - no hCalendar microformat
  echo '<tr class="rowRegularSchedule">';
  echo '<td>' . $gameDate . '</td>';
  echo '<td>' . $eventInfo . $opponent . '</td>';
  echo '<td>' . $gameTime . '</td>';
  echo '<td><a href="http://www.altitude.tv" target="_blank">'. $row['lbroadcast'].'</a></td>';
  echo '<td>'.$hdTVimage.'</td>';
  echo '<td width="5"></td>';
  echo '<td>'. $row['broadcast'] . '</td>';
  echo '<td>' .$eventLocation . '</td>';
  echo '</tr>';
} // End while
?> 

Pretty basic HTML, displaying our game information dynamically using PHP.

Finally, we’ll walk thru the microformat version. We start by creating a new row with the required class value of vevent. To give the event a name we use the summary class in a span element. Notice that I put a portion of the information within an abbr tag with the class of “mhide”. With CSS, I hide anything within an element using the mhide class from human eyes. I’ve recently read that the latest theory is to not hide any microformat information, because it looks like trickery to search engines like Google, and they may ding your page ranking for it. At this point, I’m not going to worry about that – I’d rather have a combination of usefulness and style – I want my microformat to provide event information without displaying more details than I need on the actual webpage. There may be a better way to handle this issue in the future, so I just wanted anyone following thru this example to be aware.

 <?php
  // microformat - hCalendar
  echo '<tr class="rowRegularSchedule vevent"><td>' . $gameDate . '</td>';
  echo '<td><span class="summary"><abbr class="mhide">' . $eventInfo . '</abbr>' . $opponent . '</span></td>';

Now back to our partially defined microformat – so far we just have declared that we have an event and we’ve given it a title. Next, we’ll define the event’s start time and end time, which are the dtstart and dtend classes. We’ll display the start time and hide the end time since I don’t want to display that on the webpage. The abbr element has a useful title property where we will put the special date/time format that the microformat requires. (i.e. March 30th, 2007 at 8:00 MT is formatted as “2007-03-30T20:00-07:00″. The -07:00 provides the timezone information because it is the offset from Universal Time for the Mountain timezone) Then the part we want to display simply goes within the abbr element itself.

  echo '<td><abbr class="dtstart" title="' . $dtstartM .'">' . $gameTime . '</abbr><abbr class="mhide dtend"';
  echo 'title="' . $dendM . '">' . $gameEnd . '</abbr></td>';
  echo '<td><a href="http://www.altitude.tv" target="_blank">'. $row['lbroadcast'].'</a></td><td>'.$hdTVimage.'</td>';
  echo '<td width="5"></td><td>'. $row['broadcast'].'</td>';

The last property of the hCalendar microformat that I will make use of in this example is location. Then, once the tr element is closed, the hCalendar implementation is completed.

  echo '<td><span class="mhide location">'.$eventLocation.'</span></td>';
  echo '</tr>';
    // End hCalendar Microformat
} // End while
?>

There you have it. Embedded hCalendar events for each game, that are both human and machine readable, output as valid HTML.

If you found this useful and would like me to make the source code available for download, just leave a comment.