jQueryFeature

The 21 best jQuery plugins

jQuery has made web design faster, easier and more accessible. We reveal the best jQuery plugins to save you time and effort.

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

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! Here's our list.

01. nanoGALLERY

jQuery plugin nanoGALLERY

nanoGALLERY is designed to simplify your image galleries. Featuring multi-level navigation in albums, lightbox, combinable hover effects on thumbnails, slideshow, fullscreen, pagination, image lazy load, themes, bootstrap compatibility, deep linking, customizable, i18n, and pulling in Flickr/Picasa/Google+ photo albums among others.

It is touch enabled, responsive, fast and it supports cloud storage.

02. MixItUp

jQuery plugin 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.

03. Menu-Aim

jQuery plugin 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.

04. Tooltipster

jQuery plugin 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.

05. Magnific Popup

jQuery plugin 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.

06. Unslider

jQuery plugin 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.

07. Avgrund Modal

jQuery plugin 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.

08. jQuery Knob

jQuery plugin 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.

09. Typeahead.js

jQuery plugin Typeahead

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.

10. Windows

jQuery plugin 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.

11. Cool Kitten

jQuery plugin 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.

12. Scroll Path

jQuery plugin 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.

13. Arc Text

jQuery plugin 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.

14. Lettering.js

jQuery plugin Lettering

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.

15. Tubular

jQuery plugin 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.

16. tiltShift

jQuery plugin 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.

17. Hook

jQuery plugin 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.

18. Gridster

jQuery plugin 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.

19. FitText

jQuery plugin 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.

20. turn.js

jQuery plugin turn

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.

21. ClassySocial

jQuery plugin 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.

Words: Sam Hampton-Smith

This is an updated version of an article that previously appeared on Creative Bloq.

Subscription offer

Log in with your Creative Bloq account

site stat collection