30 most useful jQuery plugins

Mar 4, 2013
jQuery
161 Shares
By

It seems as if the internet is filled with hundreds, if not thousands of jQuery plugins, sometimes it can be a little hard to keep track of all the new plugins, and therefore we have decided to bring you some of our favorite plugins, here is a list of 30 must see plugins. They cover all areas such as Form & Validation Plugins, Plugins for Responsive Layouts, as well as Web Typography Plugins, Animation Plugins and all sorts of other plugins. Do you think we have forgotten any plugins? If so then feel free to share them in the comments section.

#1. jQuery File Upload

File Upload widget with multiple file selection, drag&drop support, progress bars and preview images for jQuery. Supports cross-domain, chunked and resumable file uploads and client-side image resizing. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.

#2. jQuery Validation Engine

jQuery validation engine is a Javascript plugin aimed at the validation of form fields in the browser (IE 6-8, Chrome, Firefox, Safari, Opera 10). The plugin provides visually appealing prompts that grab user attention on the subject matter.

Validations range from email, phone, and URL, to more complex calls such as ajax processing or custom javascript functions. Bundled with many locales, the error prompts can be translated into the language of your choice.

#3. Baseline

Baseline.js is a jQuery plugin that helps you to maintain vertical rhythm set by a typographic baseline, even when adding inline images with awkward sizes.

#4. kerning.js

CSS, meet kerning. Kerning, meet CSS. Kern, style, transform, and scale your web type with real CSS rules, automatically.

Print designers have had it easy for way too long. This is 2012; the web has been around for over two decades, yet web designers don’t get full control over their typography? Forget that, use Kerning.js!

#5. Stellar.js

Parallax has never been easier. Add some simple data attributes to your markup, run $. stellar(). That’s all you need to get started.

#6. Responsive Measure

A jQuery plugin for generating a responsive ideal measure.

#7. Wookmark jQuery

This is a jQuery plugin for laying out a dynamic grid of elements.

#8. stickyMojo

stickyMojo is a contained sticky sidebar jQuery plugin brought to you by MojoTech. It is lightweight, fast, flexible and compatible with Firefox, Chrome, Safari, and IE8+. It will degrade gracefully in older versions of IE.

#9. ResponsiveSlides.js

ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slider using elements inside a container. It has been used on sites like Microsoft’s Build 2012 and Gridset App. ResponsiveSLides.js works with wide range of browsers including all IE versions from IE6 and up. It also adds css max-width support for IE6 and other browsers that don’t natively support it.

#10. jQuery URL Parser

An AMD compatible utility to parse urls and provide easy access to their attributes (such as the protocol, host, port etc), path segments, querystring parameters, fragment parameters and more. The core parser functionality is based on the Regex URI parser by Steven Levithan, and the query string parsing is handled by a modified version of node-querystring.

#11. BookBlock: A Content Flip Plugin

BookBlock is a jQuery plugin that can be used for creating booklet-like components that allow a “page flip” navigation. Any content can be used, such as images or text. The plugin transforms the structure only when needed (i.e. when flipping a page) and uses some overlays as shadow for the pages to create more realism.

#12. ddSlick

A free light weight jQuery plugin that allows you to create a custom drop down with images and description.

#13. Lettering.js

A lightweight, easy to use Javascript <span> injector for radical Web Typography.

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

#15. mailcheck

The Javascript library and jQuery plugin that suggests a right domain when your users misspell it in an email address.

#16.jQuery Tags Input

Magically convert a simple text input into a cool tag list with this jQuery plugin.

Do you use tags to organize content on your site? This plugin will turn your boring tag list into a magical input that turns each tag into a style-able object with its own delete link. The plugin handles all the data – your form just sees a comma-delimited list of tags!

#17. Filtrify

Filtrify is an advanced tag filtering plugin, inspired by Chosen multiple select feature and Orman Clark’s Vertical Navigation Menu.

Advanced because you can search tags within tags and filter items by multiple tags from different categories and get a live feedback on the number of items containing related tags.

#18. Quovolver

Quovolver is a jQuery plugin for revolving multiple testimonials or quotes in your document. Although, it can also be used to cycle through any group of elements.

#19. jQuery Credit Card Validator

jQuery Credit Card Validator detects and validates credit card numbers. It’ll tell you the detectedcredit card type and whether the number length and Luhn checksum are valid for the type of card.

#20. jQuery Panel Gallery 2.0

This jQuery plugin allow you to take a group of images and pass from one to the other in a smooth way adding some effects on it. You’re no longer are you limited to just panels to transition your images; now you have a whole slew of different effect to apply, with multiple ways to apply them

#21. Glisse.js

Glisse.js is a simple, responsive and fully customizable jQuery photo viewer. You’ll like the transitions between two pictures entirely assumed by CSS3.

#22. gridster.js

This is it, the mythical drag-and-drop multi-column grid has arrived. Gridster is a jQuery plugin that allows building intuitive draggable layouts from elements spanning multiple columns. You can even dynamically add and remove elements from the grid. It is on par with sliced bread, or possibly better. MIT licensed.

#23. equalize.js

The jQuery plugin for equalizing the height or width of elements. Equalize will accept any of the jQuery Dimension methods: height, outerHeight, innerHeight, width, outerWidth, innerWidth.

#24. HorizontalNav

HorizontalNav is a jQuery plugin that spans a horizontal navigation to fit the full width of it’s container. If you’ve ever had to create this effect on a project, you’ll know it’s pretty annoying to do. But this plugin makes it easy and adds support for IE7.

#25. jQuery Collapse

A lightweight (~1kb) jQuery plugin that enables expanding and collapsing content. This plugin provides you an accessible and lightweight solution to a widely adopted interface pattern known as progressive disclosure.

#26. Style my Tooltips

Style-my-toolips does exactly what its title says: styles browser default tooltips. The javascript generated tooltip behaves and functions exactly like browser’s native tooltip, meaning it is always visible within the viewport and its position is relevant to cursor position.

#27. jQuery Complexify

Complexify is a jQuery plugin, so you will already need to have jQuery included on your page. Complexify aims to provide a good measure of password complexity for websites to use both for giving hints to users in the form of strength bars, and for casually enforcing a minimum complexity for security reasons.

#28.  jQuery ScrollPath

It’s a plugin for defining custom scroll paths.  It uses canvas flavored syntax to draw lines and arcs. It comes with a custom scrollbar. Honestly this is probably one of my favorites!

#29. jQuery Mega Select List

The jQuery Mega Select List is a plugin that converts large select lists into a mega-menu style list of options. This plugin doesn’t affect your form, posting back the selected value as if the options were being selected in a normal select list.

#30.Freetile.js

Freetile is a plugin for jQuery that enables the organization of webpage content in an efficient, dynamic and responsive layout. It can be applied to a container element and it will attempt to arrange it’s children in a layout that makes optimal use of screen space, by “packing” them in a tight arrangement.

  • lalit

    test

    • lalit

      test 123

      • aman

        test 456

        • Phong

          test789

          • test

            test321

  • Cristian

    very nice collection