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

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.

GetSatisfaction.com is a community website that encourages conversation between consumers and companies.

Their registration form is a clever, real-world example of how microformats can make life easier on the web.

If you’ve already registered with flickr.com, technorati.com, twitter.com, or any of several other sites, you can enter your id for that website off to the right of the form and it will pre-populate the GetSatisfaction form with publically available information. Specifically, it uses the hCard microformat to extract the public portions of your profile on those other websites. The hCard microformat allows for individual elements of your contact information to be parsed and used.

If you haven’t already, go try out the form at GetSatisfaction and see it in action.

I’ll build a live example of this approach here in the coming weeks and post the code.

Okay, hopefully you now have a general understanding of what Microformats are. (Hint: If you don’t follow that last link)

Now, what can you do with them?

I’m going to walk thru a real-world example, and we’ll discuss the tools you’ll need to do so.

In this tutorial/example, you are a Denver Nuggets NBA fan, and you would like to add a few of their remaining games to your online calendar. Even if you aren’t an NBA fan, hopefully by the time we are done, you will understand how to seek out and use microformats that you are interested in.

Tools you will need:

• Recent version of Mozilla Firefox (preferably 2.0+)
• Google account (we’ll use Google’s online Calendar)
• Firefox Operator Plugin (Add-on)

Okay, let’s get started: (all links will open in a new window)

1. – Download and install Firefox
   
   Follow the basic install instructions. The current version as of this article is 2.0.0.3

   Mac or Linux user? Download Firefox from here.

2. Create a free Google account
   
   Note: If you already use Gmail or another Google service, you already have an account and can skip this step.

   Once you have your account, you can check out the Google Calendar app, but you don’t need to do anything with it yet.

3. Add the Operator Add-on to Firefox
   

   The current version of Firefox needs a little assistance to make it easy to work with Microformats. There are several add-ons that help you view and interact with Microformats, but the Operator Add-On by Michael Kaply is the one I recommend. As of this writing, the latest version is 0.7.

   Click on the link, scroll down and click on the green Install Now button. Firefox will have it installed in a matter of seconds for you – restart Firefox and you are ready for the next step.

4. Okay, you now have all the tools you need to make use of a Microformat – specifically, we are going to add the information for an upcoming event to your Google Calendar. Visit the NuggetsHoops.com Season Schedule with your Firefox browser. You’ll see the results of all games from the current NBA season. Scroll down to the bottom of the page to see the remaining games. As of this writing, there are only 5 games left, but all playoff games will also be added to this page when they are announced.
   
   
   Note: If you run across the post in the offseason, there will be new events on this same page when the next NBA season restarts in October/November.

   In the screenshot above, you will notice that I highlighted a button on the Operator toolbar that shows you that the Add-on has detected 3 Calendar events that you can add to Google Calendar, among other apps in the near future. The events are ordered from next to later, top to bottom in the pulldown that appears when you click on the button. This is the Operator Add-on at work, letting you know that it has detected Microformats on the current page and it is prepared to help you use them. Pick one of the games and left-click with your mouse. If you are currently logged into your Google Account, you will see the detail page for a new Event entry, with all of the required details already filled in. Just click “Save Changes”, and you’ve successfully used an hCalendar Microformat to create an event in your Google Calendar. Click on the Google Calendar link in the top left corner to see how it looks.

   You can now go back to the NuggetsHoops.com Season Schedule and add more events in the same way, or better yet – go explore other websites and see what other Microformat enabled websites you can find and now easily take advantage of! (Hint: The social calendar website – Upcoming.org is a great place to start!)