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.

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.

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.

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.

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.

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

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.

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.

16. gZoom

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.

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.

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.

25. PhotoShoot

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.

27. Lettering

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.

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.

31. Moatext

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.

34. Three Dee

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.

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.

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.

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.

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.

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.

46. Collapser

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.

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.

51. jqTransform

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.

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

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.

62. Scrollorama

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.

65. jmpress

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.

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.

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.

70. News Ticker

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

73. Moment

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.

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.

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.

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.

Like it? Share it.

Meet the Author:

DKumar M.

Hello, iShift was accidentally founded by a group of professionals. One of them is me, DKumar M. , an Asian freelancer who is still single. My work covers advertising, consultation, programming and web design areas.

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.