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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<script type="text/javascript" src="http://www.jeroenwijering.com/embed/swfobject.js"></script>
 
<div id="player">This text will be replaced</div>
 
<script type="text/javascript">
var so = new SWFObject('http://www.jeroenwijering.com/embed/imagerotator.swf','mpl','400','240','8');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addVariable('height','240');
so.addVariable('width','400');
so.addVariable('file','/upload/imagelist.xml');
so.addVariable('transition','fade');
so.addVariable('shownavigation','false');
so.addVariable('enablejs','true');
so.write('player');
</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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<script language="javascript" type="text/javascript">
	var currentItem;
 
function sendEvent(swf,typ,prm) { 
  thisMovie(swf).sendEvent(typ,prm); 
};
 
 
function loadFile(swf,obj) { 
  thisMovie(swf).loadFile(obj); 
 
};
 
	function getUpdate(typ,pr1,pr2,pid) {
		if(typ == "item") { currentItem = pr1; setTimeout("getItemData(currentItem)",100); }
	};
 
	function thisMovie(movieName) {
	    if(navigator.appName.indexOf("Microsoft") != -1) {
			return window[movieName];
		} else {
			return document[movieName];
		}
	};	
</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:

1
2
3
4
5
6
7

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

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

Happy surfing!

Edit: I’ve been using Firefox 3 for a couple days now, and I must say I really like it! It also looks like Firefox made some kind of record with over 8 million downloads!

This theme is compatible with WordPress 2.5.1, is widget-ready, is cross-browser compatible (yes, even Internet Explorer 6), follows W3C standards, and is CSS/XHTML valid.

As you will see, I used images for the headings in the two sidebars. To give you ultimate flexibility with that, I have included the font I used in the “fonts” folder.
You can use that to create your own unique heading images in the site.

This is the support page for this theme, so if you have any questions, or have a bug to report, post it here in the comments.

You can demo it here or Download Midnite (325)

Appreciate the work put into this free theme? Donate and show your support! Thank you!

Appreciate the work put into this free theme? Donate and show your support! Thank you!