Articles

jQuery Plugin - Feature List

1 Sep 2009 / 105 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

rzepak September 1st

awesome! thanks!
wadziu September 2nd

nice nice, I'm ready to use :)
paramah September 2nd

gr8 hack ;)
gsempe September 4th

Nice!
Morteza September 15th

Thank you for this awesome work.
Comments 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!
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!
oumar October 13th

Great plugin, very promising ! And if it was sliding like in ModX website (modxcms.com
Matt October 14th

Can we add links to the large image once clicked on by the tab?
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.
ari October 17th

Nice Thx :)
Keleo October 20th

Looks awesome now! I'll take it ;D
Web Design India November 4th

Not working properly in Firefox 3.5
bali website design November 16th

Creative! going to test it for my next project
ASD November 21st

ASDAS
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
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
Olawale December 1st

I think I've got it now. The options are evident in the actual script. Thx
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!!!
security December 7th

thanks good Feature List
Duane December 11th

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?
ron December 11th

I think this would make a wonderful plugin for wordpress, hmmm
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 ;)
smtjv December 12th

Super plugin merci a toi
punk December 14th

awsum!!!!!!! was just looking for something similar for quite some time now. thanks :)
Behind The WebDesign December 15th

Nice component !
keisuke December 17th

Great work!
SMiGL December 17th

perfectly. thanks!
David December 17th

Thanks for sharing this! Love it...
Marcell Purham December 20th

Great plug-in! Cant wait to use it
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 !
Kubuntero December 23rd

Don't have any .zip, or any archive with all ?? thanks
Wesam Alalem December 23rd

thanks for the plugin, impressive work ;)
dungeon December 23rd

nice hack....
gene December 24th

nice
zeejah December 24th

very nice.
Taimur Aziz December 27th

Simply Awesome .. I will use it in my upcoming website.
ửeử December 28th

sfds
Yemek Tarifleri December 28th

thanks for sharing!
Supersfat December 28th

Thanks for sharing! It's the best frontpage plugin. Very soon will be on our front page www.supersfat.ro
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
IT Freak December 28th

I just loved this one.
umesh December 29th

Great work
Abayomi Oyewumi December 29th

Guys great work and God Bless you
Xander December 29th

Awesome article! Thank you for sharing.
Alexandre Cruz December 29th

Nice job D:
ArthasMX December 29th

Awesome!
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?
gourav December 30th

great work
Clément January 1st

Thank you it's great
arlicle January 2nd

Cool! very cool
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!
Xicom Technologies January 4th

This is awesome!! Great work!! Thanks for sharing.
Jake January 4th

Very Nice. I will be using this for sure
prashant January 6th

Really awesome and simple plugin.. Thanks for sharing. I will surely implement on my next project
David Pratt January 8th

Very slick indeed.
pman January 8th

how do you stop the rotation once the tab is clicked?
Boyd Dames January 9th

Really awesome!
jQuery Eklenti Arşivi January 10th

Woow. Wonderful. Congratulations..
Cash Advance January 12th

That's what I'm loocking for. Thanks man for this plugin!
Trần Ngọc Hiếu January 14th

very nice , i love javascript forever
Блог Вебмастера January 14th

Nice work. Thanks
Max January 15th

How do I delete the space above the margin? I tried the css but I could not
Jonathan Miller 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)?
Ahmet January 16th

Great plugin for mainpage, thanks :)
web dizajn January 16th

Very nice, thanks.
Ras January 17th

Aynısı zaykon.blogspot.com da var
Jeff 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.
Jean-Frederic January 19th

I love this script. However, is there a way to have the link on the right side ? instead of the left side ? Thanks
Mike B January 20th

This was a very nice script that did almost everything I needed. I needed it to be able to stop rotating once the user clicked a tab, however. I added that in as another option. Very nice, easy to work with, and easy to add to. Thanks!
Toprakdeviren January 21st

Great work! Thanx.
Muzica January 26th

Damn! Super nice this plugin and pretty thanks for sharing it! I'm a later-guy, always finding out about nice stuff later than most of the people, but getting here demonstrated that I DO get to find new cool stuff! Thanks again!
XStyleBeauties Nude Fashion January 27th

Nice, will try to implement it ^^
Blue Ice Web Design January 29th

Tried it and love it, many thanks.
jonh February 3rd

nice cools
Cool I like It February 4th

Cool Java Script for Website.....:) Really Cool.....:)
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 } ); });
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?
digi neiker February 8th

Tnx, nice share :)
handyman job February 8th

Hey, Does anyone have a fix for this error I am getting in firebug? "Warning: Unknown pseudo-class or pseudo-element 'eq'." Please advise Cheers, RR
Sedat Kumcu February 11th

Thanks for this great plugin. Best regards..
318is February 13th

Very very good works... Thansk for plugin...
Drew February 15th

Hi, great plugin - I'm customising it atm to see if I can use it on my new site. Just wondering if the images can be replaced with divs so some actual text content can be in there?
nerkn February 24th

thank you both for writing also for publishing
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.
Mark Pedersen February 25th

Sorry for that, I found it 5 seconds after posting.
Jakcson February 28th

awesome!!!
Restorani February 28th

Great plugin, thanks a lot.
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
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!
Shinnobi March 3rd

Thanks
Friss Hírek March 4th

Very nice plugin. Very small and very fast (for load). Thanks for sharing with us.
Web Development Services March 5th

I've to use translator to read this post and found very helpful to me. Thanks for sharing this great post.
radyo March 5th

Thanks you! very nice plugin. i am apply mywebsite.
Franklin Manuel March 7th

Nice trick dude, it looks so elegant
logo design March 10th

you could do worse than start with an easy price comparison. Our services allow you to compare loan quotes in minutes, and ultimately maybe even save a lot of money.