jQuery is a cross-browser JavaScript Library that makes animations, event handling and ajax interactions and HTML document traversing easier for a web developer. Its a free, open-source and lightweight software designed to change the way you write with JavaScript. jQuery plugins are developed in order to extend functionality of jquery and also focus on web standards, accessibility, flexible styling and user-friendly design. They cover a wide range of functionality such as web services, data grids, Ajax helpers, events, cookie handling, animation effects, browser tweaks, navigation, user interface and widgets.

Here is a list of best jQuery plugins that every web developer must use.

JqDock

Dock is a set of iconic images that expand when rolled over with cursor and performs some action when an icon is clicked.This jQuery plugin lets you add Mac-like Dock menu to your web application. It transforms a set of images into a Dock menu, horizontal or vertical, with icons that expands on rollover.

There is no restriction on the type of image that can be used (jpg, gif, png). You can even use two images for clarity, one for the 'rest state' and one when user hovers over it. However using one large size image is better way.

To embed this plugin in your web app, first download it. Click here to download.

Implementation

Plugin the following code-

Next, call the jqDock function,

jQuery(document).ready(function(){

jQuery('#menu').jqDock(Options);

});

HTML part should be in this form-

...

...

</div>

For more info on this plugin visit http://www.wizzud.com/jqDock/.

Important! This plugin requires at least jQuery v1.2.3, because it uses API constructs that only became available in that version.

jCryption

jCryption is a javascript HTML-Form encryption plugin, which encrypts the POST/GET-Data that will be sent when you submit a form. An easy and fast to install plugin which offers a base level of security.

It allows RSA form data encryption up to 2048 bit and also supports Ajax Submit.

Download link.

Implementation

Its very easy to implement this plugin, just include files and then-

$("#normal").jCryption();

</script>

Where "normal" is the id of the form.

DEMO LINK

Form is customizable and various events can be handled easily.

For further info visit - http://www.jcryption.org/.

Browser support- Internet Explorer 6 +, Mozilla Firefox 3+, Safari 3, Opera 9+, Google Chrome.

Facebox

Facebox is a Facebook-style, jQuery based lightbox. Its simple to use and can display images, divs and even entire HTML page.

Download link.

Implementation

First include js and css files of faebox in your web app. Make sure that you specify correct path of images.

Next include -

jQuery(document).ready(function($) {

$('a[rel*=facebox]').facebox()

})

</script>

For image to be shown in facebox,

To view the div with id "facebox",

and for html page-

Click here for more info.

Requires jquery 1.2.1.

Jcrop

This plugin lets you add cropping functionality to your web application. Its simple and supports API features to create interactivity. It also supports aspect ratio locking and min/max size settings. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.

Download link.

Browser support- Firefox 2+, Safari 3+, Google Chrome 0.2+, Opera 9.5+, Internet Explorer 6+.

Form demos/documentation visit here.

jQuery Cycle Plugin

It is a slide-show plugin that supports many different types of transition effects such as before/after callbacks, auto-stop, auto-fit, click triggers and much more.

Its working is based on a method called cycle which is invoked an a container element and each child element of container becomes a slide.

Download link.

Implementation

For example if you have to give zoom effect to slide-show then-

</div>

All the three images here will become part of slideshow.

jQuery function to be added in script-

$('#zoom').cycle({

fx: 'zoom',

sync: false,

delay: -2000

});

Various effects supported by it are-wipe, zoom, fade, cover, growX, shuffle and many more.Check out its live demo here. And for the beginner's guide- http://jquery.malsup.com/cycle/begin.html.

Uploadify

This jquery plugin allows easy integration of a multiple file uploads on your website. It also has options which allows users to customize it. Even a non-coder can use it easily

Download link.

Implementation

Implementing part is very easy just embed the following code in your web application-

$(document).ready(function() {

$('#fileInput').uploadify({

'uploader' : 'uploadify.swf',

'script' : 'uploadify.php',

'cancelImg' : 'cancel.png',

'auto' : true,

'folder' : '/uploads'

});

// ]]></script>

Check out its live demo here.

Important! It requires jQuery v1.2.x or greater, SWFObject v2.2 or greater, Flash Player v9.0.24 or greater

Galleria

Galleria is a JavaScript image gallery. It can take a simple list of images and turn it into a foundation of multiple intelligent gallery designs, suitable for all web applications. It is one of the most powerful and popular jQuery plugin.

Its features includes keyboard navigation, HTML captions fullscreen etc. Also suports flicker fetcher and carousel.

Download link.

Implementation

First include the files-

</script> <script src="galleria/src/galleria.js"></script>

Then load a theme,

Add images,

Now add function-

Source - http://galleria.aino.se/

Markitup

It is a jQuery plugin that allows you turn any text area into a markup editor. Html, Textile, Wiki Syntax, Markdown, BBcode or even your own Markup system can be easily implemented.

It is a very light-weight and customizable engine and is widely used in CMSes and blogs.

Download link.

Features- Fast and unobtrusive integration, Support for keyboard shortcuts, Fully customizable and scriptable, Ajax dynamic preview and much more.

Implementation

First, Include files-

Next, plugin markitup in your code,

$(document).ready(function() {

$("#markItUp").markItUp(mySettings);

});

</script>

...

For complete info visit here.

Important - Requires jQuery 1.4.2.

Browser support - IE+, Safari 3+, Firefox 3+.

jQuery Twitter Search Plugin

Nowadays, it has become very important to socialise website. Here is a twitter search plugin for you which will allow users to see latest tweets about a topic.

Download link.

Implementation

After including the files, plugin the following code-

$('#twitter1').twitterSearch('botskool');

It is customizable that is you can define the way you want to show searches.

See the live demo here.

Superfish

Want to customize your existing CSS drop down menu?? Then superfish is the best option.Its and enhanced Suckerfish-style menu jQuery plugin. It adds following features-

Suckerfish-style hover support for IE6.
Timed delay on mouseout
Animation of sub-menu reveal
Keyboard accessibility.
Supports the hoverIntent plugin.
Can show the path to your current page while the menu is idle. The easiest way to understand this is to view the nav-bar example.

Download link.

Implementation

First include js file to your existing css drop down menu file,

Now, add superfish function,

$(document).ready(function() {

$('ul.sf-menu').superfish();

});

</script>

You can easily customize your menu.

Try demo here.