Make a Featured Content Slider for Your Site

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:



This text will be replaced

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:


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:

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: [download#3]

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

43 comments on “Make a Featured Content Slider for Your Site

  1. milo says:

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

  2. Catar4x says:

    Very nice !
    Thanks !

  3. Anthony says:

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

  4. 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:

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

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

     
    Overlay text goes here

    3. In the CSS, add the following code:

    #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. Steph says:

    Hot! Hot! Hot!

  6. Peter Benoit says:

    Very nice work, and I dig your site design!

    -pete

  7. Anthony says:

    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. @ 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. Samue says:

    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. @ 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. I enjoyed your writing style and I’ve added you to my Reader. Keep these posts coming.

  12. Mike says:

    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. Alex says:

    Your blog is interesting!

    Keep up the good work!

  14. Val says:

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

  15. Kelly says:

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

  16. selif says:

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

  17. Andres says:

    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. simsys says:

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

  19. Abhay says:

    hello i wnt to create a featured video……….it should play over there only……….can u help me plzzzzzzzz………

  20. Free Games says:

    Hi

    Is there a way of getting the javascript to read from the playlist.xml, I’m thinking of embedding an url in the xml file and getting the java to read from it.

    thanks

  21. wow great! thank you so much.

  22. Slake says:

    Hi there,

    First I just want to say great job. However, I am not able to use this method.

    My problem is, I have a full flash site, located at http://www.stevemocrae.com/studio. For the portfolio sections, I want to have this implemented but I can’t because I need to put the flash player in the actual .fla file of my site. As far as I can tell, this is not possible with jw image rotator. It requires that the gallery is a separate flash file. Any help would be great. Or if you know of any similar tutorials that can accomplish what I’m doing, I would be very glad.

    Thanks,
    Slake

  23. Tim says:

    Did the three of you ever get answers to your questions? I’m trying to figure out how to do what mike asked about but am also wondering how to do what Val & Kelly are wondering. Could someone please help.

    @ Mike- “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?” I’m wondering the same thing

    @ Val- “how do you create scrolling thumb image below instead of just numbers to click?”

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

  24. hitesh sethi says:

    awesome plugin… and the way is so easy ! just love it ! thanks a lot

  25. Tak says:

    Great piece! I would like to change the interval. How to change the time delay??

  26. qsimpson says:

    I also would like to be able to make the images links for each different slide (as most content sliders do) Any ideas?

  27. techprism says:

    Nice Image rotator, I am impressed with the delay images are shown , that makes a very interesting feature in this.

  28. Wallace says:

    how do you embed the player in a webpage???? also, the setup wizard doesn’t seem to be applicable to this anymore, please give some more explanations because i would love to be able to do this. thank you!

  29. TD76 says:

    Agree with above post… Setup Wizard no longer applies to image-rotator. Would love to be able to try this out.

  30. Chat says:

    also, the setup wizard doesn’t seem to be applicable to this anymore, please give some more explanations because i would love to be able to do this. thank you!

  31. nsbcnews says:

    I was looking for a good way to create slideshows, thanks for this tip will put it on work and see what happens…

  32. JMontes says:

    bookmarked!
    I will surely need this tutorial. 🙂

  33. Muoi Benne says:

    I have a HTML form with two drop down boxes with the options ‘Yes’ and ‘No’ in each. When submitted, i want the form to direct the user to one page if both responses are yes, and another page if either response is no. Can anyone give me some very simple guidelines on how to do this, or where i could find a nice tutorial about it?.

  34. amazing blog, i’ll be back again soon thank you

  35. PAN says:

    Thanks alot! That helps!

  36. SYCK says:

    I can’t seem to get the new navigation to work
    i’ve changed the “mpl” part to the correct ID from the embeded code. The links still dont seem to work.
    I tried connecting my code but i got a warning saying i was trying to hack you so that didn’t work.
    IDK if you need to change the “playitem” part or not.

    I’m not the best programmer so any light you can shine on the matter would be greatly appreciated thanks

  37. SYCK says:

    nevermind, got it working

  38. blog dünyam says:

    If any of you readers know how to make IE happy with this script, feel free to post it here in the comments.
    Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *