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.
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.
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).
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.
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.
This is a CSS3 variant of the Apple’s CoverFlow design pattern.
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.
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.
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.
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.
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!
This plugin will allow you to add the parallax effect into your pages with multiple images of your choice.
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.
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.
Zoomooz is an easy-to-use jQuery plugin for making any web page element zoom.
JQZoom allows you to realize a small magnifier window close to the image or images on your web page easily.
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.
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.
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.
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.
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.
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.
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).
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
This is a jQuery plugin to help add tags like input in your forms.
The jQuery Three Dee project is a plugin that transforms plain text into eye-popping 3D text.
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.
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.
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.
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.
At its simplest, the BigText jQuery plugin takes a single element and sizes the text inside of its child
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.
This detailed tutorial will show you how to turn long webform into a wizard with “steps left” information.
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.
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.
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.
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.
JQuery collapser is a multipurpose collapser plugin made for expanding and collapsing elements. Can create a accordion, list collapser using this plugin.
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.
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.
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.
This plugin is a jQuery styling plugin wich allows you to skin form elements.
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.
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.
jQuery plugin (2KB) that allows you to create an unordered list as an animated circle.
“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.
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.
jQuery plugin for reordering and filtering items with a nice shuffling animation.
An exquisite jQuery plugin for magical layouts. Enables filtering, sorting, and dynamic layouts.
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.
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.
The jQuery plugin for doing cool scrolly stuff.
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.
Scrolldeck is a jQuery plugin for making scrolling presentation decks.
A jQuery plugin to build a website on the infinite canvas.
“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.
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.
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.
An easy to use, slick and flexible news ticker in the style of the BBC News page ticker.
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).
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.
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.
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.
A jQuery plugin to add notification bubbles and a notification list to any menu.
Great looking CSS3 notifications in a lightweight script with an easy to use api. Perfect for any web app.
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.
While compiling this list, it’s always a possibility that we missed some other great jQuery plugins. Feel free to share it with us.