« Get Firefox 3…Set a Record | Home | Celebrating Freedom »

Make a Featured Content Slider for Your Site

By Nathan Parikh | June 20, 2008 delicious digg stumble upon technorati reddit


Featured ContentIf 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:

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

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

Topics: flash, javascript, tutorials |

20 responses so far to “Make a Featured Content Slider for Your Site”

  1. Gravatar
    milo Says:
    June 22nd, 2008 at 1:17 am

    Interesting approach, what about html text overlay?
    Is that possible?

  2. Gravatar
    Catar4x Says:
    June 22nd, 2008 at 2:47 am

    Very nice !
    Thanks !

  3. Gravatar
    Anthony Says:
    June 22nd, 2008 at 8:29 am

    This is a pretty great tutorial. By chance could you include how to make the numbers have “you are here” states?

  4. Gravatar
    Nathan Parikh Says:
    June 22nd, 2008 at 11:12 am

    Glad this tutorial was helpful!

    @Anthony - I’m looking into the “you are here” states…should be doable. I’ll post it here when I find the solution.

    @ milo - Yes, you can have html text overlay, but remember the same text will be over all the images in the rotator.
    Here’s what you would do:
    1. add the following code to the javascript used to embed the player:

    1

     so.addParam('wmode','transparent');

    2. underneath the “flash_nav” div you would put the div that would contain the overlay. For instance:

    1
2
3

     <div id="overlay">
 	Overlay text goes here
 </div>

    3. In the CSS, add the following code:

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

    #overlay {
	width: 360px;
	padding: 20px;
	color: #fff;
	font-weight: bold;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 14px;
	margin: -100px 0px 0px 0px;
	z-index: 1;
	}
 
#player {
	z-index: 0;
	}

    You can modify the styling of the overlay div, but just make sure you leave the z-index properties alone.

    Hope that helps!

  5. Gravatar
    Steph Says:
    June 22nd, 2008 at 1:15 pm

    Hot! Hot! Hot!

  6. Gravatar
    Peter Benoit Says:
    June 23rd, 2008 at 9:53 am

    Very nice work, and I dig your site design!

    -pete

  7. Gravatar
    Anthony Says:
    June 23rd, 2008 at 2:05 pm

    After some testing, seems that there are some bugs with FF3 on the mac.

    If you start to click the numbers, you will get a brief glimpse of a different image than the one you are on, then the actual image that you clicked for.

    Another issue is that clicking through the numbers does not always give you the same results. Sometimes the car will be on 1, or 3, or 2.

  8. Gravatar
    Nathan Parikh Says:
    June 24th, 2008 at 9:21 am

    @ Peter - thanks! glad you like it!
    @ Anthony - Thanks for pointing out the bug. Does the flash rotator do the same thing on the JW Image Rotator Homepage? If you would let me know I would appreciate it. It would help us know whether it was the flash rotator or the javascript that has the bug.
    Thanks!

  9. Gravatar
    Samue Says:
    June 24th, 2008 at 11:56 am

    Hi, beatiful script, but on internet explorer 7 show me one error,

    Error
    Line: 1
    Character 1:
    Here is the link:
    http://www.adasecperu.org/slider/

    Good Job!

  10. Gravatar
    Nathan Parikh Says:
    June 25th, 2008 at 10:59 pm

    @ Samue - I’m not sure why IE is giving that error…then again I don’t know why IE does a lot of things. ;)
    If I find a solution, I’ll post it here.
    If any of you readers know how to make IE happy with this script, feel free to post it here in the comments.
    Thanks!

  11. Gravatar
    SEO Boot Camp Says:
    July 10th, 2008 at 3:57 pm

    I enjoyed your writing style and I’ve added you to my Reader. Keep these posts coming.

  12. Gravatar
    Mike Says:
    July 15th, 2008 at 10:07 am

    Im new to this,ive been wrestling with the jeroen player for a few days now.

    I get the player to show but i cant get my images to show how do i or where do i place my images and how do i call them?

  13. Gravatar
    Alex Says:
    August 15th, 2008 at 11:12 pm

    Your blog is interesting!

    Keep up the good work!

  14. Gravatar
    Val Says:
    August 20th, 2008 at 4:48 pm

    how do you create scrolling thumb image below instead of just numbers to click

  15. Gravatar
    Kelly Says:
    August 23rd, 2008 at 1:20 pm

    Thanks for this. Is there a way to make an image in the content slider link to a certain page?

  16. Gravatar
    selif Says:
    August 30th, 2008 at 1:49 pm

    That’s a great tutorial, though I too would like each image to be able to link to a different page.

  17. Gravatar
    Andres Says:
    September 10th, 2008 at 6:36 pm

    Great Tutorial

    Seems that you need ReCaptcha to avoid the SPAM.

    It worked with WP there’s a Pluigin fo it

    http://recaptcha.net/

    Hope that works for U

  18. Gravatar
    simsys Says:
    November 6th, 2008 at 2:42 pm

    wow, great info mate… helped me in nick of time… thanks a lot again :)

Trackbacks

  1. Tutorials | 8 AS3 Image Gallery Tutorials Roundup « Flash Enabled Blog
  2. Flash Tutorials | 18 AS3 Image Gallery Tutorials Roundup | Lemlinh.com

Leave a comment