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:

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 "

";
foreach ( new DirectoryIterator("../" . $directory) as $item ) {
if ($item->isFile()) {
$path = "/" . $directory . "/" . $item;
echo "";
}
}
echo "

";
}
catch(Exception $e) {
echo 'No images found for this player.
';
}

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

Demo

One of the best presents a web developer can receive thru-out the year has arrived in December each of the last four years. 

If you have been a web developer during that span, you most likely are already aware, but just in case, I will share with you:

2008 24 Ways

Each year, a new web themed tip is posted each of the 24 days leading up to Christmas, in a fun holiday themed format. These tips are individual gems, all coming from internet industry super-stars and difference makers.

So do yourself a favor this holiday season and grab your laptop, another glass of eggnog, and head over to 24 Ways and bask in the generously shared ideas and knowledge.

Happy Holidays to All from AmpedWebStandards.com!

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.