preview

40 Super-Neat JavaScript Plugins

on Sep 7th 2009 with 81 comments

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.

JQuery Validate

MooTools Validate

A MooTools form validation plugin (similar to jQuery Validate).

MooTools 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.

JSValidate

Form Styling

FancyForm – MooTools

A MooTools plugin that replaces the browser default checkboxes and radio buttons with custom styles.

FancyForm – MooTools

PrettyCheckboxes – jQuery

Same as FancyForm, but using jQuery library.

PrettyCheckboxes – jQuery

jQuery Selectbox Plugin

A simple plugin that allows you to replace the form select list with custom styles.

jQuery Selectbox Plugin

Unobtrusive Slider Control V2

This script lets you create custom slider controls associated with input fields.

Unobtrusive Slider Control V2

Custom Checkboxes, Radio Buttons, Select Lists

Give your form a complete makeover.

Custom Checkboxes

Images

Lightbox

Youíre probably very familiar with Lightbox. If not, this is used to display overlay images on the current page.

Lightbox

jQuery lightBox Plugin

This is exactly the same as Lightbox JS, but written on top of jQuery library.

jQuery lightBox Plugin

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.

Thickbox

Highslide JS

Highslide JS serves the same purposes as Thickbox, but it has the zoom effect and allows you to drag the overlay window.

Highslide JS

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).

FancyBox

jQZoom

jQZoom allows you to show a magnified image of the thumbnail. This technique is commonly used in eCommerce websites.

jQZoom

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.

Slideshow 2! for MooTools

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.

SmoothGallery

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.

jQuery Galleria

Noobslide

NoobSlide is a MooTools class that lets you create timed slideshows and sliding panels.

Noobslide

Product Slider

This shows a demonstration of a slider widget from the jQuery UI library used to create the product slider.

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.

Coda Slider Plugin

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.

Sliding Tabs

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).

jCarousel

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).

YUI Carousel Component

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.

iCarousel – MooTools

Tabs

jQuery UI Tabs

jQuery Tabs is a powerful and flexible jQuery plugin that lets you create customizable tab navigation (highly recommended).

jQuery UI Tabs

jQuery Tabs Tutorial

Another awesome tutorial from jQueryForDesigners.com that shows you how to create a basic tab navigation with jQuery.

jQuery Tabs Tutorial

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.

MooTabs

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.

jQuery ScrollTo

SmoothScroll

A simple MooTools script that creates smooth scrolling to anchors on a web page.

SmoothScroll

Tooltips

jTips

A customizable jQuery plugin that displays tooltip popups with either static text or Ajax content.

jTips

jQuery Tooltip Plugin

Another nice Tooltip plugin.

jQuery Tooltip Plugin

Tooltip and Image Preview

A very simple jQuery script that displays tooltips and image previews.

Tooltip and Image Preview

Accordions

jQuery Accordion

This plugin creates an accordion menu. It works with nested lists, definition lists, or just nested divs.

jQuery Accordion

MooTools Accordion

The Accordion gives you a fancy way to show only the content you really need.

MooTools Accordion

MooTools Image Menu

Image Menu is a MooTools plugin that creates the horizontal accordion image menu.

MooTools 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.

sIFR 3

jQuery sIFR

A jQuery plugin that does the sIFR for you.

jQuery sIFR

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.

FLIR

CSS Stylesheet Switcher

Switch Stylesheets with jQuery

Stylesheet switcher with jQuery.

Switch Stylesheets with jQuery

MooTools Styleswitcher

CSS stylesheet switcher with MooTools.

MooTools Styleswitcher


Paulo Alexandre is pauloreg on Graphicriver
Tags: jQuery
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Hello, I'm Paulo Alexandre I'm a freelance web and graphics designer from Mozambique and South Africa.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
Newer Comments →
  • Adrian
    • Adrian

      hmm.. I was the first one to comment, why is it still “awaiting moderation”?

      • http://www.fatlizardmedia.com Juan C Rois

        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.

      • http://www.danielwhyte.com Daniel Whyte

        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.

      • http://eneza.wordpress.com Eneza

        Very very well said!!! Thanks Man!

      • LuK

        word m8!

      • http://ivorpadilla.net iPad

        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.

    • http://www.ssiddharth.com Siddharth

      Cufón isn’t a jQuery plug-in as far as I can tell.

    • Adrian

      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

        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

    Nice collection. Bookmarked.

  • http://fwebde.com/ Eric B.

    Thanks for the very useful collection!

  • Arania Jain

    Great list, thanks a lot for sharing

  • http://eyoosuf.blogspot.com Yoosuf

    cool stuff, but less prototype and lots of jQuery stuff :P

    • http://eyoosuf.blogspot.com Yoosuf

      @Jeff, Plus stuff please, CI was missing last week

    • http://www.brianswebdesign.com Brian Temecula

      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

        Yes it does.

  • http://tutorial-city.net/ Tutorial City

    I think you wanted to say easing instead of erasing on jQuery ScrollTo.

    Nice list.

  • http://www.thetutorialblog.com Wez Pyke

    Good collection of very useful plugins.

  • http://dustinlakin.com Dustin Lakin

    Really Like the collection, I would like to add one of my favorite. JCrop, great for image cropping.

  • Al

    link to Smoothscroll not working

  • http://www.enestaylan.com Enes TAYLAN

    Very cool collection…

  • http://www.imblog.info Muhammad Adnan

    very very nice collection.

  • http://blogfreakz.com mupet

    Great lits, useful collection

  • http://sigswitch.com Matt

    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/

    • http://www.nouveller.com/ Benjamin Reid

      I second that, qTip is great.

  • http://docuview.co.uk Martin

    Thank you, I appreciate an overview like that. Maybe more jQuery and less prototype please? :) Thanks again!

  • Chris

    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)

  • http://ccpmultimedia.com Connor Crosby

    Thanks for the tutorial list, very nice! Bookmarked!

  • http://www.duellweb.com duellsy

    Nice list… have passed it around work

  • http://katsfreephotos.blogspot.com washingtonson

    Thanks for the cool list!

  • .

    why isn’t cufon on it?

  • http://www.pixelluxe.com/ Marcus

    Nice list. For slideshows, I can’t live without jQuery’s Cycle plugin. http://malsup.com/jquery/cycle/

  • Arvind

    Nice collection,thnx for posting

  • http://www.dynamicguru.com Mujtaba

    really nice collection, though u missed some very vital ones like jquery AjaxForm, tablesorter , etc…

  • http://eneza.wordpress.com Eneza

    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?!

  • http://www.webmasterdubai.com webmasterdubai

    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.

  • http://www.winnou.com Sashi

    Great list. Thanks a lot

  • http://www.kotos.net kotos

    thanks. useful stuff

  • castrol

    MooTools validation from phatfusion is for mootools v1.1 ; with new 1.2.3 doesn’t work .. Have any1 newer version of this script ?

  • http://www.nouveller.com/ Benjamin Reid

    Great round-up! Bookmarked.

    Fancybox is my favourite lightbox, love it.

  • Kosei Kitahara

    beautiful! thanks!

  • http://www.creare.co.uk Stephen Webb

    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!

    • http://www.magictoolbox.com/magiczoom/ Magic Toolbox

      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.

  • http://www.webdesignexpert.me WebDesignExpert.Me

    Great collection. Linked to from via my blog.

  • http://www.tim-holmes-design.co.uk Timbronze

    Some nice plugins, may find a use for some of them. :o)

  • Pete

    You’re omitted Cufón from the “Flash and Image Text Replacement” section. The others are so clunky in comparison!

    • http://www.id3.co.th nachomaans

      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

    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

  • http://www.khwebdesign.net Kent

    That Carousel Slideshow is amazing!

  • http://michaelrijsdijk.nl paadt

    22

    • http://linux-web-py.blogspot.com/ Gilberto Ramos

      haha! nice joke!

  • http://labs.dariux.com Dario Gutierrez

    Great list. I will try with some.

  • http://www.demogeek.com DemoGeek

    Was actually looking for a nice tab code and jQuery code seems to fit in well. Perfect timing!

  • Gene

    nice collection..

    thanks!

  • http://ivorpadilla.net iPad

    Great collection, bookmarked!

  • Miro Chali

    very nice :)

  • http://www.ifadey.com iFadey

    I think you missed one great form styling jQuery plugin called jqTransform. Check here:

    http://plugins.jquery.com/project/jqtransform

  • http://computersservicing.blogspot.com/ venkat

    nice collection of plug-ins

  • http://tutorijali.hdonweb.com/ Ivan Mišić

    Nice collection, bookmarked :-)

  • http://pcgids.net/ pcgids

    Nice list, and very useful! Bookmarked :)

    Thanks

  • xiangjian

    bookmarked

  • http://help.dottoro.com Edward

    Nice collection, thanks

  • http://www.wrmdesign.co.uk Wayne M

    Nice collection

  • Michael C.

    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

  • Peter

    Neat, awesome collection!

    I’m a customer of Likno. They have AllWebMenus which is for creating JavaScript menus of all shapes, types, effects, etc. You can also find other programs based in JavaScript, jQuery, etc. if you want you can take a look at http://www.likno.com

    Greetings
    Pete

Newer Comments →