Articles

jQuery Plugin - Feature List

1 Sep 2009 / 1796 comments

I love the simplicity of using (and more important re-using) jQuery plugins. So I decided to release a plugin that came from my personal need - Feature List. This jQuery plugin enables simple and easy creation of an interactive "Featured Items" widget.

You can see the demo at this page, and you can download the complete source code with examples from here.

What’s So Great About this Plugin?

  • Slick effect, no Flash needed
  • It’s just 2K
  • Reusable on multiple containers
  • Cycles items via slideshow
  • Can be styled with custom HTML/CSS

How to Use

Using Feature List requires a simple function call:

01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
$.featureList(
        $("#tabs li a"),
        $("#output li"), {
                start_item : 1
        }
);
 
// Alternative
 
$('#tabs li a').featureList({
        output          : '#output li',
        start_item      : 1
});

This plugin is managed to implement quite quickly. The script requires two arrays of items - for tabs and output. When user clicks on one of tab the script finds corresponding output item by index and starts fading. A CSS class current is added to the current active tab.

Options

The following options are configurable:

  • start_item - Index of active tab by default (counting starts from 0) (default 0)
  • pause_on_hover - If true, animations will pause when the mouse hovers over the tabs (default true)
  • transition_interval - Length of time between transitions (0 = no automatic transitions) (default 5000)

Enjoy!

User Comments

  1. rzepak September 1st

    awesome! thanks!

  2. wadziu September 2nd

    nice nice, I'm ready to use :)

  3. September 2nd

    gr8 hack ;)

  4. September 4th

    Nice!

  5. Morteza September 15th

    Thank you for this awesome work.

  6. September 21st

    Awesome plugin!! great job. Tested it and I'm really digging it. can't wait to use it on my live site!! superb work!

  7. Keleo October 13th

    Looks great with Javascript! Do you plan on making it more unobtrusive? Probably its just the CSS that needs to be improved, I didn't have a deep look yet... I would love to see the improvement that links will still be visible with deactivated javascript :D Thanks for releasing your jQuery Plugin!

  8. oumar October 13th

    Great plugin, very promising ! And if it was sliding like in ModX website (

  9. Matt October 14th

    Can we add links to the large image once clicked on by the tab?

  10. jQueryGlobe October 16th

    @Keleo: I usually don`t care about users who have switched JS off. I guess you could change CSS and apply style with JS as needed. Maybe I`ll give a try. @Matt: I guess you can.

  11. October 17th

    Nice Thx :)

  12. Keleo October 20th

    Looks awesome now! I'll take it ;D

  13. November 16th

    Creative! going to test it for my next project

  14. ASD November 21st

    ASDAS

  15. Ali November 30th

    This slider is awesome! I have one concern though... when viewed in IE the "see project details" box is lost. Any suggestions??? -Thanks

  16. olawale December 1st

    This is Great, but I have one question. How do you configure the transition interval? I'm trying to achieve longer durations for each picture. Thanks

  17. Olawale December 1st

    I think I've got it now. The options are evident in the actual script. Thx

  18. Nate Volk December 7th

    any chance there is a scrollable element around? I have a list of ten items, but only room for three at a time. Is there a way to make it scroll through them with the slideshow? Great plugin!!!

  19. ron December 11th

    I think this would make a wonderful plugin for wordpress, hmmm

  20. Leonardo Borges December 11th

    Hey thanks for the nice script! One thing though, setting the interval to 0 (to stop transitions) does not work in chrome. A quick and dirty fix for the script is: options.transition_interval = options.transition_interval == null ? 5000 : options.transition_interval; Just wanted to let you know ;)

  21. smtjv December 12th

    Super plugin merci a toi

  22. punk December 14th

    awsum!!!!!!! was just looking for something similar for quite some time now. thanks :)

  23. keisuke December 17th

    Great work!

  24. December 17th

    perfectly. thanks!

  25. David December 17th

    Thanks for sharing this! Love it...

  26. December 20th

    Great plug-in! Cant wait to use it

  27. nas December 21st

    hello ... and sorry for my english... Great script ! is it possible to go to the next slide by clicking on a link ? and how to ? thanks !

  28. Kubuntero December 23rd

    Don't have any .zip, or any archive with all ?? thanks

  29. Wesam Alalem December 23rd

    thanks for the plugin, impressive work ;)

  30. December 23rd

    nice hack....

  31. gene December 24th

    nice

  32. zeejah December 24th

    very nice.

  33. December 27th

    Simply Awesome .. I will use it in my upcoming website.

  34. December 28th

    thanks for sharing!

  35. thom December 28th

    very nice dude! U can publish a whole webpage in these list. It looks very good and its edit easier as easy! I think, more of plugins doesnt needed. Greez from Germany

  36. ArthasMX December 29th

    Awesome!

  37. richard armstrong December 30th

    would like to ask how to add further images and links? i can copy the code in the html file i know this, but do i have to make changes to the css file to?

  38. gourav December 30th

    great work

  39. Clément January 1st

    Thank you it's great

  40. abracren January 2nd

    nice! some issues (black images when it fades) with explorer 8 and my own images with tables. solved changing animation effect: output.stop(true, true).filter(\":visible\").hide(); output.filter(\":eq(\" + nr + \")\").slideDown(function() { visible_item = nr; thanks!

  41. Jake January 4th

    Very Nice. I will be using this for sure

  42. January 6th

    Really awesome and simple plugin.. Thanks for sharing. I will surely implement on my next project

  43. January 8th

    Very slick indeed.

  44. pman January 8th

    how do you stop the rotation once the tab is clicked?

  45. January 9th

    Really awesome!

  46. January 10th

    Woow. Wonderful. Congratulations..

  47. Max January 15th

    How do I delete the space above the margin? I tried the css but I could not

  48. January 16th

    This is a great plugin, and it is working really well with a project gallery I am working on. One thing I noticed though is a warning that the Javascript is spitting out. "Warning: Unknown pseudo-class or pseudo-element 'eq'." I'm not knowledgeable enough in js to understand what is going on here. Any chance you could explain, or perhaps even supress this warning? One more thing, is there a way to trigger the next tab item with a link buried somewhere else on the page (ie, not the predesignated tables)?

  49. Ahmet January 16th

    Great plugin for mainpage, thanks :)

  50. January 16th

    Very nice, thanks.

  51. January 17th

    Aynısı

  52. January 19th

    I love this. Thanks for releasing it. Is there a way to display list items within one of the output tabs? I tried, and the script automatically throws a display: none; on them.

  53. Cool I like It February 4th

    Cool Java Script for Website.....:) Really Cool.....:)

  54. Tony February 5th

    This is working nicely except for one problem: transition_interval : 0 isn't disabling the automatic transitions...Any idea why? $.featureList( $("#homenavlist li a"), $("#output li"), { start_item : 0, transition_interval : 0 } ); });

  55. BKS February 6th

    When I validate the demo page at W3C I see a lot off errors. On my testsite I managed to fix all these errors except 3 of them and I cannot fix it myself. It's about this piece of code: Services Programming Applications Error message at W3C document type does not allow element "h3" here; missing one of "object", "ins", "del", "map", "button" start-tag Do you have a solution for this?

  56. digi neiker February 8th

    Tnx, nice share :)

  57. nerkn February 24th

    thank you both for writing also for publishing

  58. Mark Pedersen February 25th

    Hi, I love your work with this plugin. I'm wondering though, I followed through a blog which had this categorised under MIT License, but I see no mention of any kind in the source code or on your website, so I would like to know what restrictions apply. Best Regards, Mark.

  59. Mark Pedersen February 25th

    Sorry for that, I found it 5 seconds after posting.

  60. Jakcson February 28th

    awesome!!!

  61. Will February 28th

    Question. feature png does not display. I tried ./images/, ../../images/, /images/. When the is current the other css classes display the element correctly except for this one. FireFox 3.6. Thanks

  62. Will February 28th

    ...just to clarify. It's not your code because the demo works flawlessly. It's obviously my markup somewhere. I'll keep digging. disregard. Great plugin!

  63. March 3rd

    Thanks

  64. March 4th

    Very nice plugin. Very small and very fast (for load). Thanks for sharing with us.

  65. Frank March 10th

    In IE7, I notice the "project details" part overlaps for a short period from one tab to the next. It's smoother elsewhere - how do I fix this? Should it hide the details until the rest of the tab is loaded first?

  66. michaelmesh March 12th

    SWEET Plugin! Nice job.

  67. Adam March 17th

    Having the H3 tags inside the anchor tags means this Feature List does not validate for W3C standards. Anyone else had same problem and got a work around which still functions the same??

  68. Justin March 19th

    Hi, how would I go about changing the code so it doesn't cycle but only changes on click.

  69. Jezz March 19th

    @Tony I have the same issue, if you search for: options.transition_interval = options.transition_interval || 5000; In the javascript file and change the 5000 to 0 It will no longer auto transition.

  70. Jezz March 19th

    @Tony - scratch that, you just need to put the interval value in quites, e.g. '0'

  71. Jezz March 19th

    @Tony, sorry, meant quotes. $(document).ready(function() { $('#tabs li a').featureList({ output : '#output li', transition_interval : '0', start_item : 1 }); });

  72. Jezz March 19th

    @Justin - see my previous comments

  73. Seth April 2nd

    Shouldn't the a element returning false be built into the plugin? Makes for cleaner markup than having to do

  74. Seth April 2nd

    Code got cutoff -

  75. John Parrish April 5th

    If you had more then 3 item in a list is there a way you hide the extra ones and either us the scroll on the mouse or when you click on the top one the next one from the bottom scrolls up and vice-versa (click on the bottom one and one from the top scrolls in)

  76. April 9th

    Great Plugin. I needed one with the menu so this is awesome. Two questions maybe someone could help me with. How do I stop the slider after it has went through all of the "slides" once? And also, Is there a way to have it do this: If I hover over a menu item, show the image that is correlated with it? Thanks for any help

  77. evve April 26th

    Thanks so much.. I have one question: how to fade it slowly?

  78. heling April 28th

    Thank you for sharing this.Quite Creatively.

  79. The-Marshal May 8th

    can i download the source code of this plugin .. because if i want to try this i must connect to the internet THANK VERY MUCH ABOUT THIS GREAT PLUGIN

  80. shuffle May 11th

    How can I set the time of the first loading pic? I only can change the transition_interval, but this is the interval during the other images. I just wanna change the duration of the first loading image. thanks

  81. May 12th

    thanks for sharing this pugin, it very useful, thanks again

  82. Sabrina May 15th

    Thanks for sharing this! Really helpful :)

  83. Niko June 4th

    Hi everyone.I am trying to use this motools script with jquery trying to use both script in same index.html But it's not working when i erase motools.js this jquery work.when i add motools.js accordion script work jquery tab selection notworking.I need help please.i am missing one little think but i dont know what.

  84. ray June 10th

    I keep getting "The plugin does not have a valid header." when I try to activate it and it doesn't show up in my plugins listing.

  85. Preben June 12th

    I replaced all the $ ´s with jQuery and the code doesnt work.. Is there anything i need to change?

  86. Preben June 12th

    Update to my post above: jQuery(document).ready(function () {jQuery.fn.featureList = function (options) {var tabs = jQuery(this);var output = jQuery(options.output);new (jQuery.featureList)(tabs, output, options);return this;};jQuery.featureList = function (tabs, output, options) { function slide(nr) {if (typeof nr == "undefined") {nr = visible_item + 1;nr = nr >= total_items ? 0 : nr;}tabs.removeClass("current").filter(":eq(" + nr + ")").addClass("current");output.stop(true, true).filter(":visible").fadeOut();output.filter(":eq(" + nr + ")").fadeIn(function () {visible_item = nr;});} var options = options || {};var total_items = tabs.length;var visible_item = options.start_item || 0;options.pause_on_hover = options.pause_on_hover || true;options.transition_interval = options.transition_interval || 5000;output.hide().eq(visible_item).show();tabs.eq(visible_item).addClass("current");tabs.click(function () {if (jQuery(this).hasClass("current")) {return false;}slide(tabs.index(this));});if (options.transition_interval > 0) {var timer = setInterval(function () {slide();}, options.transition_interval);if (options.pause_on_hover) {tabs.mouseenter(function () {clearInterval(timer);}).mouseleave(function () {clearInterval(timer);timer = setInterval(function () {slide();}, options.transition_interval);});}}};}) is not a function [Break on this error] })(jQuery); jquery....0.0.js (line 70) error in firebug.. anyone that can help?

  87. Mickey Ross June 16th

    Reusable on multiple containers?? How can I have two separate slide shows operating on the same page at the same time? At the moment it cycles through one and then the next.... thanks

  88. semio June 21st

    Hi, this plugin is awesome. Any chance to have it in a Wordpress Plugin ? Anyone knows ? thanks

  89. Andrei July 1st

    how it put pause on "output"?

  90. Pat July 1st

    Has anyone been able to integrate AJAX loading of the content pane? That would be awesome!

  91. Rahulchhabra July 3rd

    Thanks for sharing this! Really helpful :)

  92. Simon Norman July 7th

    Thanks for publishing - the effort's appreciated. I shared this with our developer for car leasing and he thought it was neat.

  93. Ben July 9th

    This has worked like a charm, except for one thing - if I try to have an HTML list in the content (either UL or OL), the lists don't show up correctly. I think the "#output li" parameter interprets every "li" tag as a new output, or something - I'm a newbie with jquery. :) Does anyone have a solution to this problem? Thank you!

  94. James July 10th

    Is there any sort of Leicence on using this example ? Can it be used for both commercial and personal projects ? Thanks

  95. Peter July 14th

    Thom "very nice dude! U can publish a whole webpage in these list. It looks very good and its edit easier as easy! I think, more of plugins doesnt needed. Greez from Germany" Looks very nice and I would love to be able to get the whole webpage there. How do u do it?

  96. Myron July 24th

    This was mentioned above, but it wasn't clear to me. So here's a little more detail. With WordPress, one can't use the $() syntax. (Reference for more detail). To get this jQuery plugin to work in WordPress, replace '$' with 'jQuery'. I made this replacement in the .js file and in the script that invokes .js functions. For example, in jquery.featureList-1.0.0.js, replace this in line 11: use var tabs = $(this); with this: use var tabs = jQuery(this);

  97. Preben August 7th

    Myron anyway you could inlcude the whole thing? im using magento and i cant get it to work..

  98. sam August 14th

    hmm! it's really nice - but how to use to 2-3 times on da same page ? as mentioned reusable ? please help - should I change the id's respectivaley ?or any change in jquery code? thanks waiting......jqueryGlobe is awesome :)

  99. Tyler August 14th

    Is there anyway to use a different transition? For instance, slide up and down? Thank you in advance. And thank you for this great plugin!

  100. John August 19th

    Anyone have suggestions on how to implement this with touchscreen input?

  101. Bernd August 23rd

    Hi, had some problems using jquery, prototype AND scriptacolous. Do not include scriptaculous directly after prototype, but instead place it somewhere after jquery. This works: The Script for the feature list: // Finally replace all $ in jquery.featureList-1.0.0.js by jQuery.

  102. Bernd August 23rd

    again: this works: // // Finally replace all $ in jquery.featureList-1.0.0.js by jQuery.

  103. Bernd August 23rd

    damn ... ist not possible to post code here. so forget ist ...

  104. August 24th

    How can I change a tab and it's output from a link outside the feature list, but in the same webpage? Thanks in advice.

  105. Feral August 24th

    I meant "in advance"... haha.

  106. TNT_Larsn August 31st

    Can anyone please show me how to call a slide directly from outside the navigation?

  107. Kyle September 1st

    Hi there, Would you have any idea how to make the Feature list pause_on_hover for tabs and when hovering over output li? i know it's related with the javascript file but I really have no Idea. Any help or demonstrations would be greatly appreciated. Payment: virtual beers. Thank you,

  108. aeolux September 3rd

    “options” in the parameter is zero when the transmission does not go in. Please check the author. Thank you~

  109. Francis Lee September 15th

    Hi, I used this with oscmax v2.0.25 and I kept having the following errors on the javascript console: Uncaught TypeError: Object function (E,F){return new o.fn.init(E,F)} has no method 'featureList' The path is ok I guess because I used oscmax directory variables but still no go. I suspect a path problem but so far everything is loaded (the images) and printing the path variable outputs the correct value.

  110. visaap September 30th

    Wow, I've been looking for this for a while. It's really easy to use & easy to implement. Thanx a lot!

  111. anil kumar October 1st

    How i change tab (black color or png) into three different color or png

  112. Stew October 7th

    Hi, Great article! Please could someone help... I'd really like the feature to pause when you hover over the output li (main image). Currently it only pauses when you hover over the tabs. Would be very grateful if somebody could help me solve this! Thanks in advance.

  113. wecando November 19th

    I absolutely agree with you and thank you for pointing out several relevant and important examples. Several blog contributors have written extensively on this topic. Thanks for these sharing. replica watches | rolex replica | replica watches | car reviews | handmade jewelry | lockets |link building service

  114. jiniwaq November 26th

    this is a very useful blog for the upcoming businesses .refurbished laptops the points that are listed are grea .alternative investment For any business goal setting and developing a plan are very essential and are the basis for the success.i will be applying these tips in my business .SEO Consultants thank you.

  115. jiniwaq November 26th

    This is a very good post, thanks! It's the first time I come to your site, just found it in Bing. I've been going around and there's a lot of top quality work. But I tried to add it to my RSS Reader and can't. Perhaps it's a only something going on with me... I'll contact you if it stays like this! [url= Laptops[/url] [url= investment[/url] [url=

jQueryGlobe