30 most useful jQuery plugins
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.
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.
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.
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!
Parallax has never been easier. Add some simple data attributes to your markup, run $. stellar(). That’s all you need to get started.
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.
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.
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.
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.
A free light weight jQuery plugin that allows you to create a custom drop down with images and description.
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).
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!
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.
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
Glisse.js is a simple, responsive and fully customizable jQuery photo viewer. You’ll like the transitions between two pictures entirely assumed by CSS3.
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.
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.
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
#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!
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.
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.