The top 20 jQuery plugins

jQuery has made UX design on the web faster, easier and more accessible, but you don’t have to reinvent the wheel. We reveal the best jQuery plugins to save you time and effort.

When John Resig developed the jQuery library back in 2006, he can’t have imagined that it would become the most popular JavaScript library on the web, or that it would have tens of thousands of plugins written for it.

But it’s true to say that jQuery, above all other libraries out there, has been embraced by the web design community. It’s so popular and pervasive that some developers feel JavaScript itself is threatened, such is the tendency to use jQuery when plain JavaScript would work.

Appropriateness aside, jQuery is a fantastic library for designing and developing user interactions quickly. Whether it’s an image gallery or form, content-revealing animation or an explosion effect, the library provides the core building-blocks to allow you to rapidly prototype and deliver a unique user interface with the minimum of code and effort.

Don’t reinvent the wheel!

This presents an interesting question, however. Just because you can roll your own solution to any given problem, does that mean you should? Of course not! There’s absolutely no need to reinvent the wheel every time you want to create a bit of common functionality; use plugins to instantly add a behaviour. Doing so will save you even more time and effort!

Below we’ve rounded up 20 of our favourite jQuery plugins. Have a look, and let us know in the comments if we’ve missed your favourite!

01. MixItUp

MixItUp is a CSS3 and jQuery filter and sort plugin. Essentially, it enables you to quickly sort and filter through categorised content with beautifully fluid animation. Ideal for blogs, portfolios or even eCommerce stores, it’s also free for commercial use.

02. Menu-Aim

This simple-but-clever plugin can differentiate between a user trying hover over a dropdown item vs trying to navigate into a submenu’s contents. It automatically calculates the intention of your users as they interact with your menu system, preventing menus from being twitchy as the cursor moves into a sub-menu.

03. Tooltipster

Tooltipster is a modern take on the classic tool-tip, allowing you to present fully HTML-enabled tooltips in semantic markup with CSS used to control the display. There are a wide range of configuration options, making it customisable for any scenario.

04. Magnific Popup

This is a lightbox plugin for jQuery that focuses on being as lightweight and compatible as possible. The developer has concentrated on performance and user experience, so it doesn’t have all the features of alternative lightbox plugins, but it is super-fast and works perfectly across a huge range of devices, including High-DPI (Retina) devices such as the MacBook Pro.

05. Unslider

This simple little plugin is an image slider without the bells and whistles. It only slides, but as a consequence it’s tiny in size and super-responsive. Slides can contain HTML, be configured with CSS and there’s built-in keyboard-control support too.

06. Avgrund Modal

This beautiful modal-window popup adds a bit of wow to your pop-up content by blurring the page content and pushing it back in Z space, before bringing up the modal dialog. A great, lightweight solution to making your alerts really pop.

07. jQuery Knob

jQuery Knob takes input elements and converts them into touch-friendly dials that also work on the desktop. This is an excellent example of how you can tailor your content to suit new paradigms, and is worth a look for the technical approach if nothing else.

08. Typeahead.js

The product of Twitter’s development team, Type Ahead is an easy-to-implement tool that pulls from a local or external data source as your user types in to an input box, providing auto-complete suggestions as they go.

09. Windows

This handy plugin makes it easy to create full-screen scrolling websites with sections that fill the screen. Callbacks as the user moves between sections make it simple to react to events and nice features such as auto-snapping make it designer-friendly.

10. Cool Kitten

Cool Kitten is a responsive framework for parallax scrolling websites. The plugin fully supports smartphones and tablets as well as desktop browsers, producing smooth parallax movement in response to scrolling. It also includes a fluid grid, making it a great place to get started with responsive web design.

11. Scroll Path

Scroll Path is a lightweight plugin that allows you to define custom scroll paths for your content. Canvas is used to generate paths, and in compliant browsers it also allows you to rotate content in-situ for pleasing user interactions.

12. Arc Text

ArcText is a plugin from Codrops that makes it easy to bend text into an arc shape. The plugin has a built-in animation method which allows you to push and pull text into arcs over time.

13. Lettering.js

Lettering.js provides granular control over individual characters in your type, allowing you to apply kerning, colour individual letters, and apply event-listeners. It also plays nicely with FitText, giving you desktop-style control over your typography while remaining responsive.

14. Tubular

Tubular allows you to set a YouTube video as your page background. The set-up is simple, and it ‘just works’, providing immediate visual interest to your layouts.

15. tiltShift

tiltShift uses CSS3 filters to apply a tilt-shift effect to images. As such, it’s limited to working in Safari and Chrome currently, although with the release of the next generation of browsers this support should grow.

16. Hook

Hook adds the pull-to-refresh functionality you’ll find in many mobile apps, allowing you to load additional content or refresh the current view. It works intuitively as you’d expect, and provides the structure you need to capture the pull event easily.

17. Gridster

Gridster allows you to build multi-column, drag-and-drop layouts that make it easy to push and pull content around on the page, intuitively shifting other content out the way as you drop a column in position.

18. FitText

This handy plugin allows you to fill your container’s width with your type but automatically scaling the text size up or down to suit. Designed to facilitate responsive headlines, the plugin also integrates with Lettering.js to allow for granular per-character styling.

19. turn.js

One for lovers of skeuomorphism, this plugin replicates the old pages-of-a-book approach to showing content in the browser, previously the preserve of Flash, entirely with HTML5 and CSS.

20. ClassySocial

ClassySocial is a new take on the popular social-share button paradigm. Rather than simply show a list of buttons, ClassySocial animates them into position when a share button is clicked.

source :


One thought on “The top 20 jQuery plugins

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s