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 ValidationjQuery ValidateA plugin that allows you to build client-side validation and Ajax forms. JQuery Validate MooTools ValidateA MooTools form validation plugin (similar to jQuery Validate). MooTools Validate JSValidateJSValidate
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. JSValidate Form StylingFancyForm - MooToolsA MooTools plugin that replaces the browser default checkboxes and radio buttons with custom styles. FancyForm - MooTools PrettyCheckboxes - jQuerySame as FancyForm, but using jQuery library. PrettyCheckboxes - jQuery jQuery Selectbox PluginA simple plugin that allows you to replace the form select list with custom styles. jQuery Selectbox Plugin Unobtrusive Slider Control V2This script lets you create custom slider controls associated with input fields. Unobtrusive Slider Control V2 Custom Checkboxes, Radio Buttons, Select ListsGive your form a complete makeover. Custom Checkboxes
ImagesLightboxYouĂre probably very familiar with Lightbox. If not, this is used to display overlay images on the current page. Lightbox jQuery lightBox PluginThis is exactly the same as Lightbox JS, but written on top of jQuery library. jQuery lightBox Plugin ThickboxThickbox
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. Thickbox Highslide JSHighslide JS serves the same purposes as Thickbox, but it has the zoom effect and allows you to drag the overlay window. Highslide JS FancyBoxFancyBox
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). FancyBox jQZoomjQZoom allows you to show a magnified image of the thumbnail. This technique is commonly used in eCommerce websites. jQZoom
Gallery and SlideshowSlideshow 2! for MooToolsSlideshow 2! is a JavaScript class for MooTools 1.2 to stream and animate the presentation of images on your website. Slideshow 2! for MooTools SmoothGalleryUsing
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. SmoothGallery jQuery GalleriaGalleria
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. jQuery Galleria NoobslideNoobSlide is a MooTools class that lets you create timed slideshows and sliding panels. Noobslide Product SliderThis shows a demonstration of a slider widget from the jQuery UI library used to create the product slider. Product Slider
Panel SliderCoda Slider PluginCoda Slider is a jQuery plugin that imitates the panel sliding effects as seen on Slideshow 2! for MooTools coda website. Coda Slider Plugin jQuery Coda Slide TutorialThis is a tutorial from jQuery For Designers to show you how to create the Coda panel slider. Sliding TabsSliding
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. Sliding Tabs
CarouseljCarouseljCarousel
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). jCarousel YUI Carousel ComponentThe
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). YUI Carousel Component DynamicDrive - Carousel SlideshowCarousel
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 - MooToolsiCarousel
is an open source (free) JavaScript tool for creating carousel like
widgets. You can use iCarousel as news ticker/scroller or image gallery
slider. iCarousel - MooTools
TabsjQuery UI TabsjQuery Tabs is a powerful and flexible jQuery plugin that lets you create customizable tab navigation (highly recommended). jQuery UI Tabs jQuery Tabs TutorialAnother awesome tutorial from jQueryForDesigners.com that shows you how to create a basic tab navigation with jQuery. jQuery Tabs Tutorial MooTabsMooTabs
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. MooTabs Scroll to AnchorjQuery ScrollToA
very flexible jQuery plugin that lets you create scrolling animation to
any position of a web page with customizable erasing and speed options. jQuery ScrollTo SmoothScrollA simple MooTools script that creates smooth scrolling to anchors on a web page. SmoothScroll
TooltipsjTipsA customizable jQuery plugin that displays tooltip popups with either static text or Ajax content. jTips jQuery Tooltip PluginAnother nice Tooltip plugin. jQuery Tooltip Plugin Tooltip and Image PreviewA very simple jQuery script that displays tooltips and image previews. Tooltip and Image Preview AccordionsjQuery AccordionThis plugin creates an accordion menu. It works with nested lists, definition lists, or just nested divs. jQuery Accordion MooTools AccordionThe Accordion gives you a fancy way to show only the content you really need. MooTools Accordion MooTools Image MenuImage Menu is a MooTools plugin that creates the horizontal accordion image menu. MooTools Image Menu Flash and Image Text ReplacementsIFR 3sIFR
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. sIFR 3 jQuery sIFRA jQuery plugin that does the sIFR for you. jQuery sIFR FLIRFacelift
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. FLIR CSS Stylesheet SwitcherSwitch Stylesheets with jQueryStylesheet switcher with jQuery. Switch Stylesheets with jQuery MooTools StyleswitcherCSS stylesheet switcher with MooTools. MooTools Styleswitcher
|