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.
