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 (modxcms.com
-
Can we add links to the large image once clicked on by the tab?
-
@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.
-
Nice Thx :)
-
Looks awesome now! I'll take it ;D
-
Not working properly in Firefox 3.5
-
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!!!
-
thanks good Feature List
-
Great job! I love how smooth the images transition. I have been experimenting with moving the tabs to the right side but can't figure out the css. I have created a mirror image of the tab background images. Can you explain the change to the code to get the tabs on the right?
-
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 :)
-
Nice component !
-
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.
-
sfds
-
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
-
I just loved this one.
-
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
-
Cool! very cool
-
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..
-
That's what I'm loocking for. Thanks man for this plugin!
-
very nice , i love javascript forever
-
Nice work. Thanks
-
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ı zaykon.blogspot.com da var
-
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 ApplicationsError 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.
-
I've to use translator to read this post and found very helpful to me. Thanks for sharing this great post.
-
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)
-
Good job! Thank you!
-
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.
-
Convincing way of expression due to that reason ur post become so informative. Thanx 4 that post and info. Open it.. www.cheapflightsservice.com Cheap Tickets.
-
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
-
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
-
Thanks for sharing this! Really helpful :)
-
Hi everyone.I am trying to use this motools script with jquery demos.mootools.net 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 tried swapping that out in the featurelist js file, but did not get the results I wanted. 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. This is what make things go in good manner..
-
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.
-
Fantastic plugin, thanks for sharing it!
-
CSS can be workable!! It replace most of things..!!
-
thanks, I'm very glad I could get more knowledge from here, articles and info-good info, made me grow even more success always to you ..
-
I replaced all the $ ´s with jQuery and the code doesnt work.. Is there anything i need to change? pastebin.com
-
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 is really easy to use, thanks
-
Thanks for sharing this! Really Great Work :) www.raghibsuleman.com
-
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 wordpress.org 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);
-
I certainly enjoyed the way you explore your experience and knowledge of the subject! Keep up on it. Thanks for sharing the info.Education.
-
It would be nicer if, on hovering over a feature which is not the current one, the one hovered over then became the current one that was revealed. A sort of tell me about this one now option.
awesome! thanks!