The right combination of JavaScript plugins can turn a simple website into a fantastic one - all while requiring minimal work on your behalf. Today, we'll review forty of the most popular plugins available. If we missed some, let us know in the comments!
Form Validation
jQuery Validate
A plugin that allows you to build client-side validation and Ajax forms.
MooTools Validate
A MooTools form validation plugin (similar to jQuery Validate).
JSValidate
JSValidate is a form validator that utilizes aspects of the Prototype and Scriptaculous library to bring you a simple to execute, non-intrusive JavaScript form validator. With minimal setup, your forms can be processing clean data in no time at all.
Form Styling
FancyForm - MooTools
A MooTools plugin that replaces the browser default checkboxes and radio buttons with custom styles.
PrettyCheckboxes - jQuery
Same as FancyForm, but using jQuery library.
jQuery Selectbox Plugin
A simple plugin that allows you to replace the form select list with custom styles.
Unobtrusive Slider Control V2
This script lets you create custom slider controls associated with input fields.
Custom Checkboxes, Radio Buttons, Select Lists
Give your form a complete makeover.
Images
Lightbox
Youíre probably very familiar with Lightbox. If not, this is used to display overlay images on the current page.
jQuery lightBox Plugin
This is exactly the same as Lightbox JS, but written on top of jQuery library.
Thickbox
Thickbox is a jQuery plugin that is very similar to Lightbox, but comes with more features. It allows you to display: single images, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.
Highslide JS
Highslide JS serves the same purposes as Thickbox, but it has the zoom effect and allows you to drag the overlay window.
FancyBox
FancyBox is a jQuery plugin that is designed to replace the overused Lightbox. It has similar features, but better transition effects (the design is Mac-like).
jQZoom
jQZoom allows you to show a magnified image of the thumbnail. This technique is commonly used in eCommerce websites.
Gallery and Slideshow
Slideshow 2! for MooTools
Slideshow 2! is a JavaScript class for MooTools 1.2 to stream and animate the presentation of images on your website.
SmoothGallery
Using MooTools v1.11, this JavaScript gallery and slideshow system allows you to have simple and smooth (cross-fading) image galleries, slideshows, showcases and other cool stuff on your website.
jQuery Galleria
Galleria is a JavaScript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS.
Noobslide
NoobSlide is a MooTools class that lets you create timed slideshows and sliding panels.
Product Slider
This shows a demonstration of a slider widget from the jQuery UI library used to create the product slider.
Panel Slider
Coda Slider Plugin
Coda Slider is a jQuery plugin that imitates the panel sliding effects as seen on Slideshow 2! for MooTools coda website.
jQuery Coda Slide Tutorial
This is a tutorial from jQuery For Designers to show you how to create the Coda panel slider.
Sliding Tabs
Sliding Tabs is a MooTools 1.11 plugin which adds a pretty neat effect. It's a clone of something seen on Panic Software's Coda site, which in turn was very similar to a widget used in the iTunes Music Store.
Carousel
jCarousel
jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, and can be scrolled back and forth (with or without animation).
YUI Carousel Component
The carousel component manages a list of content (HTML LI elements within a UL) that can be displayed horizontally or vertically. The content can be scrolled back and forth with or without animation. It can reference static HTML content or the list items can be created dynamically on-the-fly (with or without Ajax).
DynamicDrive - Carousel Slideshow
Carousel Slideshow is a fabulous DHTML script for showcasing of images on your site. It displays images in a 3D, carousel fashion.
iCarousel - MooTools
iCarousel is an open source (free) JavaScript tool for creating carousel like widgets. You can use iCarousel as news ticker/scroller or image gallery slider.
Tabs
jQuery UI Tabs
jQuery Tabs is a powerful and flexible jQuery plugin that lets you create customizable tab navigation (highly recommended).
jQuery Tabs Tutorial
Another awesome tutorial from jQueryForDesigners.com that shows you how to create a basic tab navigation with jQuery.
jQuery Tabs TutorialMooTabs
MooTabs is a tiny(3kb) class for MooTools. As the name suggests, its primary purpose is to help out with the creation of simple tab navigation.
Scroll to Anchor
jQuery ScrollTo
A very flexible jQuery plugin that lets you create scrolling animation to any position of a web page with customizable erasing and speed options.
SmoothScroll
A simple MooTools script that creates smooth scrolling to anchors on a web page.
Tooltips
jTips
A customizable jQuery plugin that displays tooltip popups with either static text or Ajax content.
jQuery Tooltip Plugin
Another nice Tooltip plugin.
Tooltip and Image Preview
A very simple jQuery script that displays tooltips and image previews.
Accordions
jQuery Accordion
This plugin creates an accordion menu. It works with nested lists, definition lists, or just nested divs.
MooTools Accordion
The Accordion gives you a fancy way to show only the content you really need.
MooTools Image Menu
Image Menu is a MooTools plugin that creates the horizontal accordion image menu.
Flash and Image Text Replacement
sIFR 3
sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of JavaScript, CSS, and Flash.
jQuery sIFR
A jQuery plugin that does the sIFR for you.
FLIR
Facelift Image Replacement is an image replacement script that dynamically generates image representations of text on your web page in fonts that otherwise might not be visible to your visitors. The generated image will be automatically inserted into your web page via JavaScript and visible to all modern browsers.
CSS Stylesheet Switcher
Switch Stylesheets with jQuery
Stylesheet switcher with jQuery.
MooTools Styleswitcher
CSS stylesheet switcher with MooTools.
- Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for more daily web development tuts and articles.
Related Posts
Check out some more great tutorials and articles that you might like
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )Adrian September 7th
You forgot two:
( )Cufon: http://cufon.shoqolate.com/generate/
Spry: http://labs.adobe.com/technologies/spry/
Adrian September 7th
hmm.. I was the first one to comment, why is it still “awaiting moderation”?
( )Juan C Rois September 7th
People, PLEASE!!! Cut it out with “I was the first to comment”. You are taking the space of a real useful comment that somebody else might post. It’s annoying and nobody cares who’s first. Make a useful comment about the article or tutorial if you want to be noticed or be ignored if you only care about being the first to post.
Don’t waste bandwidth and let others that are genuinely interested enjoy the site without you worthless comments.
iPad September 8th
Im so agree with you Juam, this kind of comments are realy annoying, who cares who’s first for God sake? This comments sholdn’t be approved by moderators.
Siddharth September 8th
Cufón isn’t a jQuery plug-in as far as I can tell.
( )Adrian September 8th
Everyone who replied, please read the whole comment. And the title of the post
( )1. I wasn’t commenting about that I was the first, I was wondering why I was before a lot of other people who got there comments up and mine was still “awaiting moderation”.
2. this is not a list of jquery plugins – it is a list of javascript plugins. It is in the title.
Mosselman September 9th
OnTopic:
This is a great article, it really shows you what you can do with good frameworks, my favourite being jQuery, but thats just a matter of taste, others prefer MooTools or Prototype. Either way, we have come a long way from old classic Javascript. Nowerdays good looking engaging websites don’t require flash per se, you can go a very very long way using Javascript frameworks.
As a reply to the above:
—-
Yes exactly, please read the whole comment before you start bashing (and whining) about things you find annoying he made a useful comment.
MooTools Accordion isnt a jQuery plug-in either.
Do you people just decide ‘I want to comment, lets read what is up… *Scanning article for words* ‘jQuery…plug-in….’ *Scanning comments* ‘Cufon’ Hey wait that hasn’t got anything to do with jQuery…’?
‘First comment? ooh I hate that, ill be the first to comment on this now!’
Apart from insulting the person posting the comment you are also insulting the person who took the time to write the post (and the comment in fact). It’s in the title that its about javascript!
Sid September 7th
Nice collection. Bookmarked.
( )Eric B. September 7th
Thanks for the very useful collection!
( )Arania Jain September 7th
Great list, thanks a lot for sharing
( )Yoosuf September 7th
cool stuff, but less prototype and lots of jQuery stuff
( )Yoosuf September 7th
@Jeff, Plus stuff please, CI was missing last week
( )Brian Temecula September 7th
What do you mean “less prototype”? I don’t see anything related to prototype. The word prototype doesn’t even appear in the text of this page one time!
( )jaded September 8th
Yes it does.
Tutorial City September 7th
I think you wanted to say easing instead of erasing on jQuery ScrollTo.
Nice list.
( )Wez Pyke September 7th
Good collection of very useful plugins.
( )Dustin Lakin September 7th
Really Like the collection, I would like to add one of my favorite. JCrop, great for image cropping.
( )Al September 7th
link to Smoothscroll not working
( )Enes TAYLAN September 7th
Very cool collection…
( )Muhammad Adnan September 7th
very very nice collection.
( )mupet September 7th
Great lits, useful collection
( )Matt September 7th
Nice list, though you missed one of the best jQuery tooltip plugins – qTip, makes it really easy to make sexy tooltips
http://craigsworks.com/projects/qtip/
( )Benjamin Reid September 8th
I second that, qTip is great.
( )Martin September 7th
Thank you, I appreciate an overview like that. Maybe more jQuery and less prototype please?
Thanks again!
( )Chris September 7th
Perfect timing, just finished the basic coding for my website and was just thinking what jquery plugins could make it better.
Great collection, straight into my bookmark bar. (Y)
( )Connor Crosby September 7th
Thanks for the tutorial list, very nice! Bookmarked!
( )duellsy September 7th
Nice list… have passed it around work
( )washingtonson September 7th
Thanks for the cool list!
( ). September 7th
why isn’t cufon on it?
( )Marcus September 7th
Nice list. For slideshows, I can’t live without jQuery’s Cycle plugin. http://malsup.com/jquery/cycle/
( )Arvind September 7th
Nice collection,thnx for posting
( )Mujtaba September 7th
really nice collection, though u missed some very vital ones like jquery AjaxForm, tablesorter , etc…
( )Eneza September 7th
Nice List! But in a very rare occasion, is it possible that all of these JQUERIES can co-exist in one page?! or is there A way that it can only be called when needed?!
( )webmasterdubai September 7th
really nice post for javascripts plugin but i like most jquery plugins easy to use please add one more jquery plugin for image text replac nice jquery plugin working with php. have look on it http://www.xanthir.com/pir/ and also working on my personal website.
( )Sashi September 7th
Great list. Thanks a lot
( )kotos September 8th
thanks. useful stuff
( )castrol September 8th
MooTools validation from phatfusion is for mootools v1.1 ; with new 1.2.3 doesn’t work .. Have any1 newer version of this script ?
( )Benjamin Reid September 8th
Great round-up! Bookmarked.
Fancybox is my favourite lightbox, love it.
( )Kosei Kitahara September 8th
beautiful! thanks!
( )Stephen Webb September 8th
Nice arcticle, thanks for all the useful links. I’ve recently used Lightbox in a number of sites, so was surprised to see how many variations of this technology are out there – I will definitely be using these in my next projects. The JQZoom is particularly useful, I have wondered how these were implemented for some time.
Form styling is also something I’ve been looking into recently, and the examples on here are excellent and will be put to use shortly! I’m always surprised by the power of Javascript, and what keeps being developed with it, so would love to see more articles like this in the future!
( )Magic Toolbox September 10th
Hey Stephen, we created the original zoom tool Magic Zoom (on which JQZoom was modelled). We’ve just released the latest version: http://www.magictoolbox.com/magiczoom/ with loads of updates and new features. Check out the examples page.
The effect basically uses JavaScript which is triggered by a class in an anchor link. You just need two images – one large, one small – and the JavaScript. You can use CSS to style it as you wish.
( )WebDesignExpert.Me September 8th
Great collection. Linked to from via my blog.
( )Timbronze September 8th
Some nice plugins, may find a use for some of them.
)
( )Pete September 8th
You’re omitted Cufón from the “Flash and Image Text Replacement” section. The others are so clunky in comparison!
( )nachomaans September 8th
Agree with Pete! Cufón doesn’t require any plugin to run (no flash) as it’s using canvas.
Works great with most browsers (even ie6), easy to set up, faster to replace text than sifr.
http://wiki.github.com/sorccu/cufon
( )LuK September 8th
I’m missing jQuery Tools in here…There are Tooltips, Tabs, Overlays (like Thickbox etc.), Expose, Sliders/Scrollable and even a flashembed…all in one and coded very clean…
http://flowplayer.org/tools/index.html
( )Kent September 8th
That Carousel Slideshow is amazing!
( )paadt September 8th
22
( )Gilberto Ramos September 24th
haha! nice joke!
( )Dario Gutierrez September 8th
Great list. I will try with some.
( )DemoGeek September 8th
Was actually looking for a nice tab code and jQuery code seems to fit in well. Perfect timing!
( )Gene September 8th
nice collection..
thanks!
( )iPad September 8th
Great collection, bookmarked!
( )Miro Chali September 8th
very nice
( )iFadey September 8th
I think you missed one great form styling jQuery plugin called jqTransform. Check here:
http://plugins.jquery.com/project/jqtransform
( )venkat September 8th
nice collection of plug-ins
( )Ivan Mišić September 9th
Nice collection, bookmarked
( )pcgids September 10th
Nice list, and very useful! Bookmarked
Thanks
( )xiangjian September 14th
bookmarked
( )Edward September 17th
Nice collection, thanks
( )Wayne M October 14th
Nice collection
( )Daniel Whyte September 7th
People , PLEASE!!! stop complaining about “how people use the internet”, its easy to ignore things that you do not hold any relivence to what you are looking to read.
( )If it mattered to the administrators they would delete or not allow the post to be put up. Thank you for your time.
Remember the Internet is 50% useless stuff, but then again its about the little things that make us happy.
Eneza September 7th
Very very well said!!! Thanks Man!
( )LuK September 8th
word m8!
( )