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 (884)

Demo

While I work on finishing up an overdue post on the amazing An Event Apart San Francisco conference I attended last week, I thought I would at least write about one of the many new concepts that was discussed.

Progressive Enhancement (PE) is the concept of adding functionality or enhancements to the presentation and behavior of a webpage, using modern technologies such as CSS and Javascript. The PE approach adds the additional features thru externally linked files in order to avoid forcing older/less capable browsers to process data they don’t understand or can’t handle. In other words, the strategy demands that the basic content always be available, then add the fancier layout and features for browsers that can show it.

I’m going to show a quick but usable example of PE using jQuery. In this example, I am going to show how you can dynamically add an “external link” icon – to links inside a specific area of your webpage.

1. download the current release of jQuery (at this writing – 1.2.6) and add it to your webpage in the tag.

2. Next, we will utilize the jQuery approach of executing Javascript code when the Document is loaded and the DOM is ready to be manipulated.

$(document).ready(function() { });

3. Now, if we want to add an image after each external link, we can use the jQuery filter function which will addall elements that match a specified expression.

In the section above, we'll add:

$("a").filter(".selected")

4. The expression will be another function that tests the hostname property of the link to see if it is different that the current page’s hostname.

Try this:

function() { return this.hostname && this.hostname !== location.hostname; })

5. Lastly, we’ll use jQuery to insert the image after the link that matches the test expression – namely an external link!

.after(' <img src="/images/ext.png" alt="External Link">');

6. Let’s put it all together!

Here’s the sum of the Javascript that we’ve written:

$(document).ready(function() {
$('#extlinks a').filter(function() {
return this.hostname && this.hostname !== location.hostname;
}).after(' <img src="/images/ext.png" alt="External Link">');
});

put that code in a Javascript file and include it after your jQuery code in your page’s :

That’s it! Now go give it a try for yourself.

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.