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.
DynamicDrive – Carousel Slideshow
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.
MooTabs
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.
Switch Stylesheets 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.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Paulo Alexandre
Premium Members
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now
Related Posts
Premium Membership
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription
Tom Elders - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Other Plus Sites ...
aetuts+ audiotuts+ vectortuts+ tuts+ phototuts+ cgtuts+ nettuts+ psdtuts+ activetuts+Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
You forgot two:
Cufon: http://cufon.shoqolate.com/generate/
Spry: http://labs.adobe.com/technologies/spry/
hmm.. I was the first one to comment, why is it still “awaiting moderation”?
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.
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.
Cufón isn’t a jQuery plug-in as far as I can tell.
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.
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!
Nice collection. Bookmarked.
Thanks for the very useful collection!
Great list, thanks a lot for sharing
cool stuff, but less prototype and lots of jQuery stuff
@Jeff, Plus stuff please, CI was missing last week
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!
Yes it does.
I think you wanted to say easing instead of erasing on jQuery ScrollTo.
Nice list.
Good collection of very useful plugins.
Really Like the collection, I would like to add one of my favorite. JCrop, great for image cropping.
link to Smoothscroll not working
Very cool collection…
very very nice collection.
Great lits, useful collection
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/
I second that, qTip is great.
Thank you, I appreciate an overview like that. Maybe more jQuery and less prototype please?
Thanks again!
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)
Thanks for the tutorial list, very nice! Bookmarked!
Nice list… have passed it around work
Thanks for the cool list!
why isn’t cufon on it?
Nice list. For slideshows, I can’t live without jQuery’s Cycle plugin. http://malsup.com/jquery/cycle/
Nice collection,thnx for posting
really nice collection, though u missed some very vital ones like jquery AjaxForm, tablesorter , etc…
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?!
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.
Great list. Thanks a lot
thanks. useful stuff
MooTools validation from phatfusion is for mootools v1.1 ; with new 1.2.3 doesn’t work .. Have any1 newer version of this script ?
Great round-up! Bookmarked.
Fancybox is my favourite lightbox, love it.
beautiful! thanks!
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!
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.
Great collection. Linked to from via my blog.
Some nice plugins, may find a use for some of them.
)
You’re omitted Cufón from the “Flash and Image Text Replacement” section. The others are so clunky in comparison!
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
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
That Carousel Slideshow is amazing!
22
haha! nice joke!
Great list. I will try with some.
Was actually looking for a nice tab code and jQuery code seems to fit in well. Perfect timing!
nice collection..
thanks!
Great collection, bookmarked!
very nice
I think you missed one great form styling jQuery plugin called jqTransform. Check here:
http://plugins.jquery.com/project/jqtransform
nice collection of plug-ins
Nice collection, bookmarked
Nice list, and very useful! Bookmarked
Thanks
bookmarked
Nice collection, thanks
Nice collection
Very nice list of tools. Thanx for the info.
Thought of adding to this my own suggestion: AllWebMenus – with it you can make web menus of all kinds (it is based on DHTML/JavaScript) for your site.
They have also a good set of tools that include software for creating JQuery modal windows, JQuery tooltips, drop down menu trees, web buttons, etc.
You can check them out if interested at http://www.likno.com
Hope this info helps you
Michael
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.
Very very well said!!! Thanks Man!
word m8!