Here is a list of best jQuery plugins that every web developer must use.
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.
Plugin the following code-
Next, call the jqDock function,
HTML part should be in this form-
<img src='image1.gif' alt='image1.png' title='' />
<a href='page.html' title=''>
<img src='imageN.png' alt='' title='' /></a>
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.
It allows RSA form data encryption up to 2048 bit and also supports Ajax Submit.
Its very easy to implement this plugin, just include files and then-
Where "normal" is the id of the form.
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 is a Facebook-style, jQuery based lightbox. Its simple to use and can display images, divs and even entire HTML page.
First include js and css files of faebox in your web app. Make sure that you specify correct path of images.
Next include -
For image to be shown in facebox,
<a href="image.jpg" rel="facebox">text</a>
To view the div with id "facebox",
<a href="#facebox" rel="facebox">text</a>
and for html page-
<a href="facebox.html" rel="facebox">text</a>
Requires jquery 1.2.1.
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.
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.
For example if you have to give zoom effect to slide-show then-
<div id="zoom" class="pics">
<img src="image1.jpg" width="200" height="200" />
<img src="image2.jpg" width="200" height="200" />
<img src="image3.jpg" width="200" height="200" />
All the three images here will become part of slideshow.
jQuery function to be added in script-
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
Implementing part is very easy just embed the following code in your web application-
<input id="fileInput" name="fileInput" type="file" />
'uploader' : 'uploadify.swf',
'script' : 'uploadify.php',
'cancelImg' : 'cancel.png',
'auto' : true,
'folder' : '/uploads'
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
Its features includes keyboard navigation, HTML captions fullscreen etc. Also suports flicker fetcher and carousel.
First include the files-
</script> <script src="galleria/src/galleria.js"></script>
Then load a theme,
<div class="images"><img src="image1.jpg"><img src="image2.jpg"></div>
Now add function-
Source - http://galleria.aino.se/
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.
Features- Fast and unobtrusive integration, Support for keyboard shortcuts, Fully customizable and scriptable, Ajax dynamic preview and much more.
First, Include files-
<link rel="stylesheet" type="text/css" href="markitup/skins/markitup/style.css" />
<link rel="stylesheet" type="text/css" href="markitup/sets/default/style.css" />
Next, plugin markitup in your code,
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.
After including the files, plugin the following code-
It is customizable that is you can define the way you want to show searches.
See the live demo here.
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.
First include js file to your existing css drop down menu file,
Now, add superfish function,
You can easily customize your menu.
Try demo here.