15 brilliant jQuery plugins

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 is a fantastic library for designing and developing user interactions quickly. Whether it’s an image gallery or form, content-revealing CSS animation or an explosion effect, the library provides the core building-blocks to allow you rapid prototyping and to deliver a unique user interface with the minimum of code and effort.

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. Slinky

Slinky is an elegant, timeless menu design that’s useful for any scenario in which you’ve got a lot of sub-menus. Select an item and an animation slides the sub-menu over. There’s a demohere.

02. TwentyTwenty

Instead of placing two images side-by-side to show the differences between them, you can use this plugin which places one on top of the other. Users drag a slider so that the bottom image shows through, enabling them to see what has changed in a before-and-after situation.

03. Material design hierarchical display

Hierarchical display animation effects can be used to guide users’ attention and lead them from one point to the next in a process. This animation can be customised to suite your design, and has great documentation to get you going.

04. Tabslet

As the name suggests, Tabslet is a lightweight plugin for making tabs. It supports next/previous controls, rotation, custom events, deep linking and there’s lots of other useful functionality. Have a look at the demo to see if it suits your needs.

05. Readable

Readable helps to make sure your text blocks stay within the optimum parameters for readability; too narrow or too wide makes your paragraphs harder to scan. There’s a great demothat shows you the edits made to running copy in order to make it easier on the eye.

06. 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.

07. 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.

08. 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.

09. 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.

10. 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.

11. 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.

12. 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.

13. 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.

14. 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.

15. 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.

Words: The Creative Bloq team

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

Liked this? Read these!

• Master digital marketing with these newsletter templates
• We reveal the best web fonts for your site
• Discover the best user testing software
• Read our step-by-step guide to user experience
• We reveal where to find logo design inspiration