Articles
jQuery Plugin - Feature List
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
-
nice nice, I'm ready to use :)
-
gr8 hack ;)
-
Nice!
-
Thank you for this awesome work.
-
Awesome plugin!! great job. Tested it and I'm really digging it. can't wait to use it on my live site!! superb work!
-
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!
-
Great plugin, very promising ! And if it was sliding like in ModX website (
-
Can we add links to the large image once clicked on by the tab?
-
Nice Thx :)
-
Looks awesome now! I'll take it ;D
-
Creative! going to test it for my next project
-
ASDAS
-
This slider is awesome! I have one concern though... when viewed in IE the "see project details" box is lost. Any suggestions??? -Thanks
-
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
-
I think I've got it now. The options are evident in the actual script. Thx
-
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!!!
-
I think this would make a wonderful plugin for wordpress, hmmm
-
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 ;) -
Super plugin merci a toi
-
awsum!!!!!!! was just looking for something similar for quite some time now. thanks :)
-
Great work!
-
perfectly. thanks!
-
Thanks for sharing this! Love it...
-
Great plug-in! Cant wait to use it
-
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 !
-
Don't have any .zip, or any archive with all ?? thanks
-
thanks for the plugin, impressive work ;)
-
nice hack....
-
nice
-
very nice.
-
Simply Awesome .. I will use it in my upcoming website.
-
thanks for sharing!
-
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
-
Awesome!
-
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?
-
great work
-
Thank you it's great
-
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! -
Very Nice. I will be using this for sure
-
Really awesome and simple plugin.. Thanks for sharing. I will surely implement on my next project
-
Very slick indeed.
-
how do you stop the rotation once the tab is clicked?
-
Really awesome!
-
Woow. Wonderful. Congratulations..
-
How do I delete the space above the margin? I tried the css but I could not
-
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)?
-
Great plugin for mainpage, thanks :)
-
Very nice, thanks.
-
Aynısı
-
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.
-
Cool Java Script for Website.....:) Really Cool.....:)
-
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 } ); });
-
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? -
Tnx, nice share :)
-
thank you both for writing also for publishing
-
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.
-
Sorry for that, I found it 5 seconds after posting.
-
awesome!!!
-
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
-
...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!
-
Thanks
-
Very nice plugin. Very small and very fast (for load). Thanks for sharing with us.
-
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?
-
SWEET Plugin! Nice job.
-
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??
-
Hi, how would I go about changing the code so it doesn't cycle but only changes on click.
-
@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.
-
@Tony - scratch that, you just need to put the interval value in quites, e.g. '0'
-
@Tony, sorry, meant quotes. $(document).ready(function() { $('#tabs li a').featureList({ output : '#output li', transition_interval : '0', start_item : 1 }); });
-
@Justin - see my previous comments
-
Shouldn't the a element returning false be built into the plugin? Makes for cleaner markup than having to do
-
Code got cutoff -
-
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)
-
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
-
Thanks so much.. I have one question: how to fade it slowly?
-
Thank you for sharing this.Quite Creatively.
-
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
-
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
-
thanks for sharing this pugin, it very useful, thanks again
-
Thanks for sharing this! Really helpful :)
-
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.
-
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.
-
I replaced all the $ ´s with jQuery and the code doesnt work.. Is there anything i need to change?
-
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?
-
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
-
Hi, this plugin is awesome. Any chance to have it in a Wordpress Plugin ? Anyone knows ? thanks
-
how it put pause on "output"?
-
Has anyone been able to integrate AJAX loading of the content pane? That would be awesome!
-
Thanks for sharing this! Really helpful :)
-
Thanks for publishing - the effort's appreciated. I shared this with our developer for car leasing and he thought it was neat.
-
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!
-
Is there any sort of Leicence on using this example ? Can it be used for both commercial and personal projects ? Thanks
-
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?
-
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);
-
Myron anyway you could inlcude the whole thing? im using magento and i cant get it to work..
-
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 :)
-
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!
-
Anyone have suggestions on how to implement this with touchscreen input?
-
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.
-
again: this works:
//
// Finally replace all $ in jquery.featureList-1.0.0.js by jQuery. -
damn ... ist not possible to post code here. so forget ist ...
-
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.
-
I meant "in advance"... haha.
-
Can anyone please show me how to call a slide directly from outside the navigation?
-
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,
-
“options” in the parameter is zero when the transmission does not go in. Please check the author. Thank you~
-
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.
-
Wow, I've been looking for this for a while. It's really easy to use & easy to implement. Thanx a lot!
-
How i change tab (black color or png) into three different color or png
-
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.
-
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
-
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.
-
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=
awesome! thanks!