nDzynes Web Development and Design

If you surf the web for any length of time, you’ll eventually notice that a very popular and very useful tool that many websites use is a featured content slider. This is useful in a variety of ways. Churches like to use it to attractively display their upcoming events, businesses like to use it to showcase their latest products, bloggers can highlight their latest or most popular posts, and artists can showcase their latest work. There are just a lot of useful applications for this. Two “real-world” examples I quickly found were Gateway’s website and AMD’s website.

Can’t wait? Here’s a preview of what we’ll be making.

This tutorial is thorough, so it might seem long at first, but once you get it, you’ll see how easy it is. Don’t be scared of the code either, it’s mostly copy and paste.

For this example, we’ll be using the popular JW Image Rotator which uses Flash. The player comes with built in controls, but they don’t look very good and if you have the controls turned on, then you also have to have the caption beneath the image…just not the best aesthetically.

Once you download the player, you’ll have to embed it in your page with some code. The easiest way to do this is to use the Setup Wizard. Make sure that you have the value “shownavigation” (found under Control Bar Appearance in the Setup Wizard) set to False. Under “External Communication”, set “enablejs” to True. Also, make sure that you use the swfobject code, not the embed code! Just click “get the swfobject code” at the bottom of the Setup Wizard Page.

Here’s a quick example of what your code should look like:

<script src="http://www.jeroenwijering.com/embed/swfobject.js" type="text/javascript"><!--mce:0--></script>
 
<div id="player">This text will be replaced</div>
 
 
<script type="text/javascript"><!--mce:1--></script>

Now that you have your slideshow finished, it’s time to give it some controls for your visitors.
First, copy this code into your header before the ending head tag:

<script type="text/javascript"><!--mce:2--></script>

Next, we have to set up the HTML for the controls. Copy and paste this code beneath the code you used to embed your image rotator:

<div id="flash_nav">
 
<ul>
 
	<li><a href="javascript:sendEvent('mpl','playitem','0');">1</a></li>
 
 
	<li><a href="javascript:sendEvent('mpl','playitem','1');">2</a></li>
 
 
	<li><a href="javascript:sendEvent('mpl','playitem','2');">3</a></li>
 
</ul>
</div>

Here’s what some of that code means:
‘mpl’ is the ID of the flash player which MUST match the ID of the embed code (line 6 in the first example). You can change this to anything you want, just remember to change the ID in both the Image Rotator code AND in the navigation code.
In my example I had 3 links. However, you can have as many as your playlist has. Just update the numbers accordingly.

With some CSS styling you can get your featured content slider looking just the way you want.

My final result
Download my example: Featured Content Slider Demo (4668)

This is not the only way to create this feature on your website, but I hope this method will be a help to you!