80 Useful (Free) jQuery Plugins to Enrich Your Site’s User Experience
Most of you already aware that jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML. it’s also known for fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. Or in developer’s words “write less, Do more”.
Now days jQuery is on top of its charm and everyone from JavaScript world love to experiment with it. Because of the remarkable significance of JQuery in Designing field, it is an essential to keep yourself up-to-date with its Quality uses and Examples.
In this article, we’ll take a look at various freely available Powerful jQuery Plugins to Enrich Your Site’s User Experience.
For those, who don’t know what is jQuery? and what it can do? the please follow the link below for brief introduction.
- jQuery: The Write Less, Do More, JavaScript Library | jquery.com
- jQuery | From Wikipedia, the free encyclopedia
You may be interested in the following related articles as well.
Feel free to join us and you are always welcome to share your thoughts that our readers may find helpful.
Don’t forget to subscribe to our RSS-feed and follow us on Twitter — for recent updates.
Excellent jQuery Plugins
01. Camera slideshow
It’s a slide show plugin. Camera slideshow is an open source project. It is tested on new browsers, but I tried to make it compatible with the old versions of Internet Explorer too (8 and 7).
02. Nivo Slider
The Nivo Slider is beautiful and easy to use image slider. Completely free and totally open source, there literally is no better way to make your website look totally stunning. The features includes, 16 Beautiful Transition Effects, Simple and Flexible Setup, Loads of settings to tweak, uilt in directional and control navigation etc.
Plugin Demo Plugin Details & Download Page
03. Flexslider
FlexSlider was built to serve up the best responsive jQuery slider around. FlexSlider has been verified in Safari 4+, Chrome 4+, Firefox 3.6+, Opera 10+, and IE7+. iOS and Android devices are supported as well. jQuery versions 1.3+ are supported.
Plugin Demo Plugin Details & Download Page
04. Thumbnail Gallery
Thumbnail Gallery JQuery plugin is a easy to use JQuery plugin for web developer to build JavaScript gallery on their web application. The gallery can be driven by xml. Easy setup and only minimum programming knowledge is needed. Best to showcase your photography portfolio.
Plugin Demo Plugin Details & Download Page
05. CoverScroll
This is a CSS3 variant of the Apple’s CoverFlow design pattern.
06. Wow Slider
WOW Slider is a jQuery image slider with stunning visual effects (Blast, Fly, Blinds, Squares, Slices, Basic, Fade, Ken Burns, Stack, Stack vertical and Basic linear) and tons of professionally made templates. WOW Slider is packed with a point-and-click wizard to create fantastic sliders in a matter of seconds without coding and image editing.
Plugin Demo Plugin Details & Download Page
07. AnythingSlider
AnythingSlider is plain and simple slider which can slide any type of content. The feature includes, Next Slide / Previous Slide Arrows, Navigation tabs are built and added dynamically (any number of slides), Optional custom function for formatting navigation text, Auto-playing (optional feature, can start playing or stopped) etc.
Plugin Demo Plugin Details & Download Page
08. Cycle Plugin
The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more.
09. jParallax
jParallax turns a selected element into a ‘window’, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions (and options for layer initialization), they move by different amounts, in a parallaxy kind of way.
10. zLayers
zLayers is a jQuery parallax plugin that allows you to orientate an element based on the position of your mouse to the page’s window, or element’s parent. zLayer is perfect for interactive illustrations and rich user experience through creative methods through a parallax effect. Best part about zLayer is how easy, lightweight, and quick the plugin is!
11. Image Parallax
This plugin will allow you to add the parallax effect into your pages with multiple images of your choice.
Plugin Demo Plugin Details & Download Page
12. jqFloat
jqFloat.js is a jQuery plugin that able to make any HTML objects appear to be “floating” on your web page. It helps create simple floating animation and make your websites come alive with these little “floating” object.
Plugin Demo Plugin Details & Download Page
13. Zoomer
This plugin allows you to easily transform your image lists into beautiful galleries with Flash-like zoom effects in them. It’s a simple but elegant way of giving your interfaces a nice little shine and at only 2KB in size, it’s both compact and surprisingly easy to use.
Plugin Demo Plugin Details & Download Page
14. Zoomooz
Zoomooz is an easy-to-use jQuery plugin for making any web page element zoom.
Plugin Demo Plugin Details & Download Page
15. JQZoom
JQZoom allows you to realize a small magnifier window close to the image or images on your web page easily.
Plugin Demo Plugin Details & Download Page
16. gZoom
Useful image zoom jquery plugin with many features like Zoom using mouse wheel hover, Moving mouse hover, Click on plus and minus to zoom etc.
17. Cloud Zoom
Cloud Zoom is a free jQuery image zoom plugin, a comparable alternative to products such as Magic Zoom. Compared to the popular jQZoom plugin, Cloud Zoom is smaller, has more features and more robust compatability across browsers.
18. AnythingZoomer
With this plugin, you will have a small area. You mouse over it. An area pops up giving you a zoomed in closer look. It’s flexible in many ways, in that the “small”, “large”, and “zoom” areas are all pretty easy to customize (via CSS). It’s inflexible in other ways, in that it doesn’t “automatically” work by cloning content or anything like that (which is arguably more flexible), and the HTML structure is fairly rigid.
19. Hover zoom effect
The hover zoom effect basically reverse zooms an image while fading in a label on top of it when the mouse hovers over it. It makes for a pretty slick effect which could be used on thumbnails.
Plugin Demo Plugin Details & Download Page
20. Fancy Zoom
This plugin is the jQuery version on the fancy zoom effect. As describe on the fancy zoom web site, this effect is providing a smooth, clean, truly Mac-like effect, almost like it’s a function of Safari itself.
21. Image Zoom
This plug-in makes links pointing to images open in the “Image Zoom”. Clicking a link will zoom out the clicked image to its target-image. Click anywhere on the image or the close-button to zoom the image back in. Only ~3k minified.
Plugin Details & Download Page
22. imgAreaSelect
imgAreaSelect is a jQuery plugin for selecting a rectangular area of an image. It allows web developers to easily implement image cropping functionality, as well as other user interface features, such as photo notes (like those on Flickr).
23. Jcrop
Jcrop is the quick and easy way to add image cropping functionality to your web application. 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.
Plugin Demo Plugin Details & Download Page
24. PHP & jQuery image upload and crop
As name implies this is a image upload and crop plugin which allows you to upload different types of images, JPG, GIFs and PNG. You can upload images and have a random file name.
Plugin Demo Plugin Details & Download Page
25. PhotoShoot
The jQuery PhotoShoot plugin gives you the ability to convert any div on your web page into a photo shooting effect, complete with a view finder.
Plugin Demo Plugin Details & Download Page
26. Arctext
Arctext lets you curving Text with CSS3 and jQuery. While CSS3 allows us to rotate letters, it is quite complicated to arrange each letter along a curved path. Arctext.js is a jQuery plugin that let’s you do exactly that. Based on Lettering.js, it calculates the right rotation of each letter and distributes the letters equally across the imaginary arc of the given radius.
Plugin Demo Plugin Details & Download Page
27. Lettering
Lettering.js, a jQuery plugin for managing the appearance of your web type. It is a great tool to help designers get a chokehold on their typography.
Plugin Demo Plugin Details & Download Page
28. FitText
FitText is a jQuery plugin for inflating web type. FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.
Plugin Demo Plugin Details & Download Page
29. Textualizer
Textualizer is a jQuery plug-in that allows you to transition through blurbs of text. When transitioning to a new blurb, any character that is common to the next blurb is kept on the screen, and moved to its new position.
Plugin Demo Plugin Details & Download Page
30. Airport
Airport is a rather simple text effect plugin for JQuery. It emulates the style of those flickering information boards you sometimes find on airports and train stations.
Plugin Demo Plugin Details & Download Page
31. Moatext
You can use this jQuery plugin for adding flavor to your web site. By this plugin, text messages on your site are animated on mouse over.
32. TextExt
TextExt is a plugin for jQuery which is designed to provide functionality such as tag input and autocomplete. The core design principle behind TextExt is modularity and extensibility. Each piece of functionality is separated from the main core and can act individually or together with other plugins. TextExt’s modular design allows you easily turn a standard HTML text input into a wide range of modern, tailored to your needs input field without bloating your source code and slowing down your site with the code that you aren’t using.
33. TagBox
This is a jQuery plugin to help add tags like input in your forms.
Plugin Demo Plugin Details & Download Page
34. Three Dee
The jQuery Three Dee project is a plugin that transforms plain text into eye-popping 3D text.
Plugin Demo Plugin Details & Download Page
35. jqIsoText
With this plugin you can change size of letters in text. It starts from one font size and increment or decrement to other font size. On that way you will get something similar to isometric projection. That can be done for whole block of text or for every word in some text.
Plugin Demo Plugin Details & Download Page
36. slabText
a jQuery plugin for producing big, bold & responsive headlines. This script splits headlines into rows before resizing each row to fill the available horizontal space. The ideal number of characters to set on each row is calculated by dividing the available width by the CSS font-size – the script then uses this ideal character count to split the headline into word combinations that are displayed as separate rows of text.
Plugin Demo Plugin Details & Download Page
37. jQuery Approach
a jQuery plugin that allows you to animate CSS properties based on distance to an object. It works in a very similar manner to jQuery animate, however it animates over distance instead of time. The closer you get to the object, the more the style will be applied.
Plugin Demo Plugin Details & Download Page
38. jQuery Glow
Add the ability to make elements “glow” when you hover over them. For browsers that support the text-shadow CSS property, you can also add a halo. The halo only appears in browsers that support the text-shadow CSS property (like Safari). Without it, you can still make the text glow, but you can’t add the halo.
Plugin Demo Plugin Details & Download Page
39. BigText
At its simplest, the BigText jQuery plugin takes a single element and sizes the text inside of its child
Plugin Demo Plugin Details & Download Page
40. jQuery Text Resizer
The Text Resizer plugin attempts to solve one problem: that of resizing text on demand by the user. A lot of us have visited sites, particularly news websites, where the user is given the option to enlarge or decrease the size of the website’s text. This is especially useful for sites where it is expected that older visitors will make use of the site.
Plugin Demo Plugin Details & Download Page
41. FormToWizard
This detailed tutorial will show you how to turn long webform into a wizard with “steps left” information.
Plugin Demo Plugin Details & Download Page
42. NobleCount
NobleCount… for a more ‘proper’ count of the characters remaining. This plugin allows you to dynamic display of the number of characters remaining in a textarea, Twitter-style.
Plugin Demo Plugin Details & Download Page
43. Keypad
A jQuery plugin that attaches a popup keyboard to a text field for mouse-driven entry or adds an inline keypad in a division or span.
44. Show Password
This plugin works by adding a text field that takes the value of what is typed into the password field. Then, when the link is clicked the password field is hidden and the text field is shown.
Plugin Demo Plugin Details & Download Page
45. Fancy AJAX Contact Form
Providing a simple and reliable means of feedback from site visitors is a crucial part of any web presence. The most simple and common feedback channel are contact forms. In this tutorial we are going to make an AJAX contact form which leverages modern web development techniques.
Plugin Demo Plugin Details & Download Page
46. Collapser
JQuery collapser is a multipurpose collapser plugin made for expanding and collapsing elements. Can create a accordion, list collapser using this plugin.
Plugin Demo Plugin Details & Download Page
47. AJAX/jQuery/PHP Contact Form
This tutorial uses XHTML, CSS, jQuery and a little PHP to make a pop-up/modal contact form that validates whatever is entered into the form and then uses AJAX to send the form without refreshing the page.
Plugin Demo Plugin Details & Download Page
48. prettyCheckboxes
This script is for people who wants to have a consistent look for checkboxes across browser or those who simply want them to look better. By using this script you won’t loose any of the regular inputs usability.
49. Uploadify
Uploadify is a jQuery plugin that integrates a fully-customizable multiple file upload utility on your website. It uses a mixture of JavaScript, ActionScript, and any server-side language to dynamically create an instance over any DOM element on a page.
Plugin Demo Plugin Details & Download Page
50. StickyForms
StickyForms is a jquery plugin that automatically saves all form fields into cookies, and then autofills those values on any form that shares element IDs across your site.
Plugin Demo Plugin Details & Download Page
51. jqTransform
This plugin is a jQuery styling plugin wich allows you to skin form elements.
52. FlexBox
FlexBox is a jQuery plugin that is intended to be a very flexible replacement for html textboxes and dropdowns, optionally using Ajax to retrieve and bind JSON data. It can be used as a ComboBox, with optional per-result html templates or Suggest box, like Google’s search or Data-driven type-ahead input box.
Plugin Demo Plugin Details & Download Page
53. In-Field Labels
This is a simple plugin that turns properly formatted HTML forms into forms with in-field label support. Labels fade when the field is focussed and disappear when text entry begins. Clearing a field and leaving brings back the label.
54. Mobily Blocks
jQuery plugin (2KB) that allows you to create an unordered list as an animated circle.
Plugin Demo Plugin Details & Download Page
55. infiniScroll
“infiniScroll” works for blog posts… but will work for anything where you scroll to get more data. Just like Twitter.com, Facebook status messages, etc. Instead of paginating items, why not just keep scrolling? We like to scroll more than we like to go to a new page in some cases. It’s easier to get to items, and you already paid the prices of loading, so why load again! Posts and tweets are one thing, but will also work same for leaderboards, portfolio items, anything where you want to load subsequent elements.
56. Respond
The goal of this script is to provide a fast and lightweight (3kb minified / 1kb gzipped) script to enable responsive web designs in browsers that don’t support CSS3 Media Queries – in particular, Internet Explorer 8 and under. It’s written in such a way that it will probably patch support for other non-supporting browsers as well.
Plugin Demo Plugin Details & Download Page
57. Tipped
Tipped allows you to easily create beautiful tooltips using the jQuery JavaScript library.
58. Quicksand
jQuery plugin for reordering and filtering items with a nice shuffling animation.
Plugin Demo Plugin Details & Download Page
59. Isotope
An exquisite jQuery plugin for magical layouts. Enables filtering, sorting, and dynamic layouts.
60. PromptuMenu
A jQuery plugin that allows you to display list items in a similar way like a iPhone home screen. If item count exceeds the displayed items on one screen, users can swipe through screens.
61. Turn.js
Turn.js is a plugin for jQuery that adds a beautiful transition similar to real pages in a book or magazine. It works in all modern browsers including touch devices.
Plugin Demo Plugin Details & Download Page
62. Scrollorama
The jQuery plugin for doing cool scrolly stuff.
63. Scrollpath
A jQuery plugin for defining a custom path that the browser follows when scrolling. The plugin uses canvas flavored syntax for drawing paths, using the methods moveTo, lineTo and arc. To help with getting the path right, a canvas overlay with the path can be enabled when initating the plugin.
Plugin Demo Plugin Details & Download Page
64. scrolldeck
Scrolldeck is a jQuery plugin for making scrolling presentation decks.
65. jmpress
A jQuery plugin to build a website on the infinite canvas.
Plugin Demo Plugin Details & Download Page
66. Fly Off Page
“Fly Off Page” will take selected elements and make them fly (not literally) off the page in a random or pre-defined direction. Customizable options include duration (of the animation), direction, tween (extend animation) and ‘retainSpace’ which allows you to retain, disregard or animate-out the space that the specified element once took up.
Plugin Demo Plugin Details & Download Page
67. Circulate
This plugin allows you to animate something and rotate in a circle. You can declare speed, height, and width. Those are pretty obvious / standard / expected parameters for a plugin like this.
Plugin Demo Plugin Details & Download Page
68. jMenu
jMenu is a jQuery plugin that enables us to create horizontal navigations with unlimited sub-menus. Besides jQuery, it also requires jQuery UI and supports all the effects of this library (like fadeIn or slideDown). The markup of the menu is pretty clean as it makes use of nested lists. The look and feel of the output is set in a CSS file so updating it without touching the JS code is possible.
Plugin Demo Plugin Details & Download Page
69. Google Maps Slider
This plugin allows you to attach event listeners to different thing, like the map itself or things inside the map. A simple example would be if a marker is clicked, you can change the zoom level of the map, change information shown elsewhere on the page, or really anything else you might want to do with JavaScript.
Plugin Demo Plugin Details & Download Page
70. News Ticker
An easy to use, slick and flexible news ticker in the style of the BBC News page ticker.
Plugin Demo Plugin Details & Download Page
71. FullCalendar
FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event).
Plugin Demo Plugin Details & Download Page
72. Continuous Calendar
A jQuery calendar plugin which comes with may featurs like Date dragging, No pagination, continuous month flow, Range shifting by dragging, Range expand with Shift + Mouse click, Display current date, Allow disabling of dates, Month select, Week select, Popup support, Support for different date formats etc.
73. Moment
Moment.js is a lightweight (3.7k) JavaScript date library for parsing, manipulating, and formatting dates.
74. jQuery-Ajax Autosuggest Plugin
This plugin has the usual functionality with a little extra flexibility: multiple instances, passing custom parameters, the id and the value are returned, keyboard-controlled, and a few others… Almost anything you need from an autosuggest plugin you can do with the built-in options! I didn’t focus on style, the CSS file is small and very easily changed. I’ve included some examples of handing servers-side requests, but, outside the returned data requirements, that’s completely up to you – e.g.) if you’d like to limit the results returned you can pass an additional parameter to your server-side script, it’s not a built-in requirement.
Plugin Details & Download Page
75. Flot
Flot is a pure JavaScript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side. The focus is on simple usage (all settings are optional), attractive looks and interactive features like zooming and mouse tracking.
Plugin Demo Plugin Details & Download Page
76. noty
noty is a jQuery plugin that makes it easy to create alert, success, error and confirmation messages as an alternative the standard alert dialog. Each notification is added to a queue. The notifications can be positioned at the top, topCenter (like GMail), bottom, center, top left, top right, bottom left or bottom right. There are lots of other options in the API to customise the text, animation, speed, buttons and much more.
77. Notification Menu
A jQuery plugin to add notification bubbles and a notification list to any menu.
Plugin Demo Plugin Details & Download Page
78. jQuery CSS3 Notifications
Great looking CSS3 notifications in a lightweight script with an easy to use api. Perfect for any web app.
Plugin Demo Plugin Details & Download Page
79. Star Rating Plugin
The Star Rating Plugin is a plugin for the jQuery JavaScript library that creates a non-obstrusive star rating control based on a set of radio input boxes.
80. UI Bootstrap
With this theme, not only do you get the ability to use Bootstrap-themed widgets, but you can now also use (most) of Twitter Bootstrap side-by-wide with it without components breaking visually.
Find Something Missing?
While compiling this list, it’s always a possibility that we missed some other great jQuery plugins. Feel free to share it with us.
Hey guys, can i suggest a few nice freebies from our site? Free use on sites.
http://designmodo.com/image-slider-jquery-css3/
http://designmodo.com/login-form-css3-jquery/
http://designmodo.com/jquery-accordion-menu/
Thanks.
this is amazing!
a great job, thanks!
wooow i’m adore of jquery tools
wooow realy JQuery MAke BIg LIB For Help All Dev Thxx for your post
The Star Rating Plugin is a plugin for the jQuery JavaScript library that creates a non-obstrusive star rating control based on a set of radio input boxes.
Great set of great plugins !
Thank your for you good job !
Agreed!
Wow, huge list!
Thanks a lot!
Worth noting that all these effects can be created in JavaScript, without jQuery. With no need for the jQuery library, the tool performs only what it needs to do, so can be faster to load and more responsive to use.
I reckon its one of the best list ever compiled of JQuery plugins!!
Shikeb
Huge list, Thanks!
But may I also suggest Filtrify:
http://luis-almeida.github.com/filtrify/
awesome! personally using magic tool box’s magic zoom on one on my magento web site. awesome i must say!
Excelente colección, excelente artículo ;)
this is amazing!
a great job, thanks!
Great plugins…
Really great compilation, thanks for share!
This is just epic work !
Nice List of Plugins.
Thanks for the compilation! Bookmarked! :)
Try this on the Airport jsFiddle:
body{
color: #cc8800;
font-size: 3em;
font-family: superpoint;
text-shadow: #cc8800 0 0 24px;
background-color: #111;
text-transform: uppercase;
}
You’ll have to find the Superpoint font, but anyways, it’s pretty nifty.
Word to the wise: do not use Quicksand with lightboxes. You will have to do some crazy jQuery tricks to get it to reinitialize the lightbox plugin. Go with Isotope instead!
The Star Rating Plugin is a plugin for the jQuery JavaScript library that creates a non-obstrusive star rating control based on a set of radio input boxes.
Thanks for this amazing things
Great Post! Thanks for sharing..
Dhammal collection of plugins @ one place … :) really nice
They all are amazing.
I also would like to share a new jQuery slider creator , it is totally free:)
Hi Slider
http://www.hislider.com/
Thanks :)
Need something for advt. banner that can fly from any direction without disturbing the content of the current webpage.
For eg:
http://codecanyon.net/item/jquery-flying-popup/full_screen_preview/175653
Nice Widgets..
You surely missed FlexSlider :) by WooThemes
very good
css not only use for give color,pedding but also representing language.It is very good to know different effect..