20 Essential jQuery Plugins for Every Developer’s Toolkit

In the six years since its January 2006 launch, jQuery has managed to become the most popular JavaScript plugin library in the world, deployed in nearly 56% of the top 10,000 websites in the world. As free, fast open-source code, jQuery enables developers to add technically challenging functions and features with a few lines of code.

Essential jQuery Plugins

Much of jQuery’s success is owed to its extensive library of plugins. With thousands of plugins in existence, and many more in development, there exists – for all practical purposes – a plugin to satisfy every developer’s need.

The following 20 jQuery plugins make for especially useful additions to any developer’s virtual toolkit.

Essential jQuery Plugins

FitText
When the Boston Globe launched its brand new ‘responsive design’ in September 2011, the internet gasped in collective awe. This was made possible with HTML5, and clever use of jQuery plugins such as FitText. FitText stretches or shrinks text dynamically to fit any screen size – an indispensable element of any responsive or fluid design. As responsive design becomes increasingly ubiquitous in 2012, the FitText jQuery plugin should be called into action more than ever before.

FitText

Sausage
As infinite-scrolling pages become more common across the web, the Sausage.js plugin will become all the more relevant. Essentially, this plugin informs the visitor of his location within a document and serves as a handy bookmark as well as navigational aid.

Demo

Sausage

jTable
jTable allows anyone to create feature-rich Ajax based CRUD (Create, Read, Update, Delete) tables on the fly. Include animations, server-side paging and sorting, and stylized elements with just a few lines of HTML or JavaScript with this handy jQuery plugin.

Demo

jTable

Supersized
This plugin helps you create gorgeous full-screen slideshows – a design element that is bound to become more common with increasing broadband speeds across the globe.

Demo

Supersized

Mosaic
Mosaic is a jQuery plugin that generates automatic sliding boxes and captions with support for slide and fade-in animations. Chances are, you’ve already seen this plugin in action across the internet as developers adopt this design element en masse.

Demo

Mosaic

jQuery File Upload
A flexible file upload widget with support for cross-domain file uploads, progress bars, drag & drop upload, and preview images. Additionally, it works with PHP, Python, Ruby on Rails, or any other server-side platform.

Demo/a>

jQuery File Upload

jPlayer
An open-source alternative to proprietary media players, jQuery allows you to insert rich media across browsers and platforms. Completely customizable with plenty of available integration plugins, this is one of the leading media libraries.

Demo

jPlayer

Isotope
Another design-oriented jQuery plugin, Isotope helps you create radically stylized layouts with support for animations, sorting, and filtering of individual items.

Demo

Isotope

Adipoli
Add jaw-dropping hover effects to images dynamically with Adipoli, a lightweight jQuery plugin that can be used to add more than 20 transition effects to images, ranging from gray scale and popout to slicedown and foldLeft.

Demo

Adipoli

Craftyslide
Yet another slideshow plugin, Craftyslide eschews the rich features of Supersized in favor of speed. At less than 2kb, it is one of the fastest slideshow plugins that, nevertheless, manages to create gorgeous results.

Demo

Craftyslide

Image Zoom
In the era of Pinterest, the internet is bound to become a more visual experience. Plugins such as Image Zoom will help users zoom in on specific parts of an image for a dramatic transition effect.

Demo

Image Zoom

Power PWChecker
This is a jQuery plugin that checks password strength dynamically and offers a rating (weak, medium, strong). This has been proven to compel users to pick stronger passwords – a first step in securing user data from unwanted attacks.

Demo

Power PWChecker

Page Scroller
A powerful plugin that helps you add smooth-scrolling and animated page targets to any web-page. Fast, responsive, and easy to implement, the Page Scroller plugin makes any lengthy page look twice as good.

Demo

Page Scroller

Circular Content Carousel
A content carousel is a common design element on most sites nowadays. This jQuery plugin helps you create a continuous (i.e. ‘circular’) content carousel with a few lines of code. Fast, responsive, and extremely easy to use.

Demo/a>

Circular Content Carousel

Poshy Tip
Poshy Tip is a jQuery plugin that takes the humble tooltip and adds a touch of style to it. Not only can you alter the appearance of the default tooltip, but also alter its content asynchronously.

Demo

Poshy Tip

jQuery Collapse
This lightweight plugin helps you collapse or expand panels to save space and display information only when requested – a functional, practical design effect that finds a variety of uses.

Demo

jQuery Collapse

jQuery Shadow
A simple, yet effective plugin to create dynamic drop shadows of different styles on the fly.

Demo

jQuery Shadow

Metro JS
This powerful plugin replicates Windows 8’s Metro interface on the Internet. Even though the Metro JS plugin is in its early iterations with initial focus on Live Tiles, the results already look very promising, especially in light of Windows 8’s launch later this year.

Demo

Metro JS

Instabir
A quick and effective way to conduct A/B split testing with jQuery, Instabir switches between two specified designs and records the activity in a MySQL database.

Demo/a>

Instabir

Noty
Noty makes it possible to replace the standard alert notification with customized alert, success, error and confirmation messages that support variable speed, buttons and animation.

Demo

Noty

Conclusion

jQuery plugins open up a world of possibilities for very little effort. In this article, I’ve listed some plugins you should definitely have in your toolkit.

A word to the wise – it is easy to get carried away and over-do these plugins on a website. It is more than possible to add too much jQuery in a project. Treat plugins as the star of the project, rather than the supporting actor, and you’ll quickly see your project turn into a bloated mess. Use these plugins as they are meant to be used – as catalysts to facilitate development – and you’ll accentuate your work.