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
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.
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.
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.
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.
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.
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.
Another design-oriented jQuery plugin, Isotope helps you create radically stylized layouts with support for animations, sorting, and filtering of individual items.
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.
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.
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.
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.
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.
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.
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.
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.
A simple, yet effective plugin to create dynamic drop shadows of different styles on the fly.
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.
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.
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.
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.