Today, just as we have published each of the past three years, we have the 2013 edition of our top 50 jQuery plugins that we feel are the most useful and most innovative from this year. 2013 has been quite possibly the best year ever!
All of the time-saving plugins below will in one way or another deliver a specific solution to many of the design and development issues you may have.
And just to help you find exactly what you are looking for we have split the plugins into the following categories: Layouts, Navigation, Social & Sharing, Sliders & Carousels, Image Management, Forms, Typography & Text, and finally a selection of plugins that don’t quite fit into a particular category but are useful enough to stand alone.
Here we go, the most popular, most innovative and the most useful jQuery plugins from 2013:
Useful jQuery Plugins for Layouts
jQuery Nested – Create Multi-Column, Dynamic Grid Layouts
jQuery Nested allows you to create a completely gap-free multi-column, dynamic grid layout.
jResponsive – Super-Smooth Transition Layouts
jResponsive allows you to add a dynamically-resized layout to any page or element and customize the layout the way you want (with or without top, bottom, right or left navigation). It can be applied to a container element and will arrange its children in a layout that makes optimal use of screen space, by "packing" them in tightly.
Salvattore is a library agnostic JS script that will help you organize your HTML elements according to the number of columns you specify, like jQuery Masonry.
Rubberband – A Plugin for Adding Responsive Breakpoint Events
Rubberband allows scripts to act on media query changes in real time by making use of the browser’s internal media query matching system,
FlexNav – Flexible, Device Agnostic Navigation
FlexNav is a mobile-first example of using media queries and jQuery to make a robust drop-down menu. From the developer: It is a ‘device agnostic approach to complex site navigation with support for touch and keyboard sccessibility’.
Sidr – Creating Facebook-Like Side Menus
Sidr is an easy to use plugin that will create a responsive Facebook-a-like side menu.
scrollNav.js – Scrolling Resposnive Side-Nav
scrollNav is a lightweight jQuery plugin that grabs your page's existing content, divides it up into logical sections and builds a customizable scrolling sidebar navigation.
Flaunt.js – Responsive Navs with Nested Click-To-Reveal
Flaunt.js allows you to create a stylish responsive navigation with nested click to reveal.
jVanilla Menu is a simple jQuery menu plugin. It takes an existing CSS drop-down menu, and adds enhancements such as animations, submenu levels and timeout delays to it.
jQuery Responsive Tabs
This is a jQuery plugin that provides responsive tab functionality, with the tabs transforming into an accordion when it reaches a CSS breakpoint.
ScrollUp creates a customisable “Scroll to top” feature that will work with any website.
Useful jQuery Social & Sharing Plugins
ClassySocial is a plugin that lets your site visitors easily see what networks you belong to and visit them in a click of a button.
ContentShare lets you share the content from a page on a social network. Instead of the default meta tags, it lets you specify and select what content you wish to share. As of now, it supports Facebook and Twitter, though you can easily add additional social networks.
jQuery Github – A plugin to display your favorite Github Repositories
Sliders, Carousels and Galleries
slideToucher – Plugin
slideToucher is a content swiping touch enabled jQuery plugin with support for both vertical and horizontal swipes.
Flexisel – Responsive Carousel Plugin
Flexisel is a responsive image carousel plugin with options specifically available for adapting the carousel for mobile and tablet devices.
Swipebox – A Touchable jQuery Lightbox
Swipebox is a responsive jQuery lightbox plugin that features: Swipe gestures for mobile; Keyboard Navigation for desktop; CSS transitions with jQuery fallback; Retina support for UI icons.
Smoothbox – Responsive Lightbox
Smoothbox is a simple, lightweight, and responsive jQuery lightbox script by Kevin Thornbloom.
Photoset Grid – Arrange Images into a Flexible Grid
Inspired by Tumblr’s photoset feature, Photoset Grid is a simple jQuery plugin for arranging images into a flexible grid.
Owl Carousel is a touch enabled jQuery plugin that lets you create responsive carousel sliders.
Owl Carousel →
CarouFredSel turns any HTML elements into a carousel. It is dual-licensed under MIT and GPL, and also has its own WordPress plugin.
FilmRoll is a lightweight and simple jQuery carousel plugin that centers the selected item on the page.
jQuery CollagePlus is an image gallery plugin that arranges your images to fit exactly within a container. It allows you to give the images CSS borders, and even define a target row height and padding between the images.
jQuery CollagePlus →
Block Slider is a modal window image gallery plugin for jQuery that can be used to create a simple image slider.
Nivo Lightbox is a small and responsive jQuery Lightbox plugin. It comes with automatic content detection and features CSS effects and transitions.
Nivo Lightbox →
Magnific Popup – Truly Responsive Lightbox
Magnific Popup →
Image Management Plugins
imageloader.js – A Plugin for Preloading Images
jQuery Alpha Image Plugin
The jQuery Alpha Image Plugin can change selected image colours to transparent and offers the result as either an image or as imagedata.
imagefill.js can be used to center the images and make them fill the container.
Offreg turns your images into RGB “prints”. All you need to do is to apply the plugin to any HTML element, and then provide an image SRC and insert offset value. On the downside, the rendering does not look impressive in Google Chrome.
Forms, Dropdowns, Tabs and Modals
Selectize.js is a hybrid of text box and select box. It can be used to display contact lists or country selectors.
EasyDropDown turns elements into drop-down menus that can be used for navigation or enhanced UI implementation.
Minimalect is a select replacement for jQuery. It offers keyboard navigation, choice filtering and even supports themes.
typeahead.js – A Fully-Featured Autocomplete Library
Inspired by Twitter’s autocomplete search functionality, typeahead.js is a fast and fully-featured autocomplete library.
jQuery Selectric – HTML Selects Customization
jQuery Selectric is a plugin for easy manipulation and customization of HTML selects.
Image Picker – Transforms <select> into a More User-Friendly Interface
Image Picker is a simple jQuery plugin that transforms a <select> element into a more user friendly graphical interface.
jQuery Fullscreen Editor
jQuery Fullscreen Editor transforms text fields into customizable editors. You can use it on forms or even standalone. The plugin supports most modern web browsers and comes with two different transitions.
Tabslet is a jQuery plugin for tabs. It supports custom events, rotation and animation and is compatible with most modern web browsers.
bPopup – A jQuery Modal Pop-Up Plugin
bPopup is a lightweight (only 1.49kb gzipped) modal popup plugin. The plugin doesn’t create or style your popup but provides you with all the logic like centering, modal overlay, events and more, giving you plenty of opportunities to customize as per your needs.
Moa Modal is a jQuery modal plugin that comes with custom animations and positioning.
Sieve – Add an Interactive Search Filter to Any Content
Sieve allows you to quickly add an interactive search filter to any block of content.
Typography & Text Plugins
FlowType.js lets you configure the font size and line height ratios, thereby improving the overall appeal of typography in your projects. You can also specify maximum and minimum width thresholds to control FlowType.js
Squishy is a jQuery plugin that automatically resizes text to exactly fit the container.
Succint is a minimal jQuery plugin that can truncate multiple lines of text. It shortens your text to a given size, and then adds an ellipsis to its end.
Textillate.js – A Plugin for CSS3 Text Animations
Textillate.js is a simple plugin for applying amazing CSS3 animations to any block of text.
…and all the rest…
CLNDR.js is a jQuery plugin for creating calendars. But instead of generating the markup, it requires you to provide an Underscore.js HTML template. It takes your template and injects the calendar data into it.
Mapael is a jQuery plugin based on raphael.js that allows you to display dynamic vector maps.
FailSafe, as the name suggests, lets your application work smoothly in situations such as when you lose internet connectivity or run out of laptop battery. It can also disable elements that require an active internet connection or can drain your battery.
Inspired by the recent Gmail composer tour, Chardin.js creates simple overlay instructions for web apps to demonstrate to your readers how to use your web app.
Bigfoot is a jQuery plugin that creates exceptional footnotes.
jQuery.Pin will ‘pin’ any element to the top of a container as you scroll down the page. It can be easily disabled for smaller screen-sizes.
PowerTip is a jQuery tooltip plugin with some advanced features like hover intent testing, tooltip queueing, and support for complex data.
jQuery Builder – Easily Build a Custom Version of jQuery
jQuery Builder allows you to easily build a custom version of jQuery that just includes the modules you need.