50 Most Useful jQuery Plugins from 2013

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:

You might also like to view the 50 most useful plugins from 2012 or from 2011.

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

jQuery Nested allows you to create a completely gap-free multi-column, dynamic grid layout.

jQuery Nested →

jResponsive – Super-Smooth Transition Layouts

jResponsive allows you to add a dynamically-resized layout to any page or element

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.

jResponsive →

Salvattore

Salvattore is a library agnostic JS script that will help you organize your HTML elements

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.

Salvattore →

Rubberband – A Plugin for Adding Responsive Breakpoint Events

Rubberband allows scripts to act on media query changes in real time

Rubberband allows scripts to act on media query changes in real time by making use of the browser’s internal media query matching system, window.matchMedia.

Rubberband →

Navigation Plugins

FlexNav – Flexible, Device Agnostic Navigation

FlexNav is a mobile-first example of using media queries and jQuery to make a robust drop-down menu

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

FlexNav →

Sidr – Creating Facebook-Like Side Menus

Sidr is an easy to use plugin that will create a responsive Facebook-a-like side menu

Sidr is an easy to use plugin that will create a responsive Facebook-a-like side menu.

Sidr →

scrollNav.js – Scrolling Resposnive Side-Nav

scrollNav.js a Scrolling Resposnive Side-Nav jQuery plugins

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.

scrollNav.js →

Flaunt.js – Responsive Navs with Nested Click-To-Reveal

Flaunt.js allows you to create a stylish responsive navigation with nested click to reveal

Flaunt.js allows you to create a stylish responsive navigation with nested click to reveal.

Flaunt.js →

jVanilla Menu

jVanilla Menu is a simple jQuery menu plugin

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.

jVanilla Menu →

jQuery Responsive Tabs

jThis is a jQuery plugin that provides responsive tab functionality

This is a jQuery plugin that provides responsive tab functionality, with the tabs transforming into an accordion when it reaches a CSS breakpoint.

jQuery Responsive Tabs →

scrollUp

ScrollUp creates a customisable Scroll to top feature

ScrollUp creates a customisable “Scroll to top” feature that will work with any website.

scrollUp →

Useful jQuery Social & Sharing Plugins

ClassySocial

ClassySocial is a plugin that lets your site visitors easily see what networks you belong to

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.

ClassySocial →

ContentShare

ContentShare lets you share the content from a page on a social network

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.

ContentShare →

jQuery Github – A plugin to display your favorite Github Repositories

jQuery Github is A plugin to display your favorite Github Repositories

jQuery Github →

Sliders, Carousels and Galleries

slideToucher – Plugin

slideToucher is a content swiping touch enabled jQuery plugin

slideToucher is a content swiping touch enabled jQuery plugin with support for both vertical and horizontal swipes.

slideToucher →

Flexisel – Responsive Carousel Plugin

Flexisel is a responsive image carousel plugin with options specifically available for adapting the carousel

Flexisel is a responsive image carousel plugin with options specifically available for adapting the carousel for mobile and tablet devices.

Flexisel →

Swipebox – A Touchable jQuery Lightbox

Swipebox is a responsive jQuery lightbox plugin

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.

Swipebox →

Smoothbox – Responsive Lightbox

Smoothbox is a simple, lightweight, and responsive jQuery lightbox script3

Smoothbox is a simple, lightweight, and responsive jQuery lightbox script by Kevin Thornbloom.

Smoothbox →

Photoset Grid – Arrange Images into a Flexible Grid

Photoset Grid is a simple jQuery plugin for arranging 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.

Photoset Grid →

Owl Carousel

Owl Carousel is a touch enabled jQuery plugin that lets you create responsive carousel sliders

Owl Carousel is a touch enabled jQuery plugin that lets you create responsive carousel sliders.

Owl Carousel →

CarouFredSel

CarouFredSel turns any HTML elements into a carousel

CarouFredSel turns any HTML elements into a carousel. It is dual-licensed under MIT and GPL, and also has its own WordPress plugin.

CarouFredSel →

FilmRoll

FilmRoll is a lightweight and simple jQuery carousel plugin

FilmRoll is a lightweight and simple jQuery carousel plugin that centers the selected item on the page.

FilmRoll →

jQuery CollagePlus

jQuery CollagePlus is an image gallery plugin that arranges your images to fit exactly within a container

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 Slide

Block Slider is a modal window image gallery plugin for jQuery

Block Slider is a modal window image gallery plugin for jQuery that can be used to create a simple image slider.

Block Slide →

Nivo Lightbox

Nivo Lightbox is a small and responsive jQuery Lightbox plugin

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 is a fast, lightweight and feature-rich responsive lightbox plugin” /></p><p>Magnific Popup is a fast, lightweight and feature-rich responsive lightbox plugin with its focused on performance and providing the best experience for users on any device. It is also Zepto.js compatible.</p><p><a target=Magnific Popup →

Image Management Plugins

imageloader.js – A Plugin for Preloading Images

imageloader.js - A Plugin for Preloading Images

imageloader.js →

jQuery Alpha Image Plugin

The jQuery Alpha Image Plugin can change selected image colours to transparent

The jQuery Alpha Image Plugin can change selected image colours to transparent and offers the result as either an image or as imagedata.

jQuery Alpha Image Plugin →

imagefill.js

imagefill.js can be used to center the images and make them fill the container

imagefill.js can be used to center the images and make them fill the container.

imagefill.js →

Offreg

Offreg jQuery plugin turns your images into RGB prints

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.

Offreg →

Forms, Dropdowns, Tabs and Modals

Selectize.js

Selectize.js is a hybrid of text box and select box

Selectize.js is a hybrid of text box and select box. It can be used to display contact lists or country selectors.

Selectize.js →

EasyDropDown

the EasyDropDown jquery plugin turns elements into drop-down menus

EasyDropDown turns elements into drop-down menus that can be used for navigation or enhanced UI implementation.

EasyDropDown →

Minimalect

Minimalect is a select replacement for jQuery

Minimalect is a select replacement for jQuery. It offers keyboard navigation, choice filtering and even supports themes.

Minimalect →

typeahead.js – A Fully-Featured Autocomplete Library

typeahead.js is a fast and fully-featured autocomplete library

Inspired by Twitter’s autocomplete search functionality, typeahead.js is a fast and fully-featured autocomplete library.

typeahead.js →

jQuery Selectric – HTML Selects Customization

jQuery Selectric is a plugin for easy manipulation and customization of HTML selects

jQuery Selectric is a plugin for easy manipulation and customization of HTML selects.

jQuery Selectric →

Image Picker – Transforms <select> into a More User-Friendly Interface

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.

Image Picker →

jQuery Fullscreen Editor

jQuery Fullscreen Editor transforms text fields into customizable editors

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.

jQuery Fullscreen Editor →

Tabslet

Tabslet is a jQuery plugin for tabs with support for custom events, rotation and animation

Tabslet is a jQuery plugin for tabs. It supports custom events, rotation and animation and is compatible with most modern web browsers.

Tabslet →

bPopup – A jQuery Modal Pop-Up Plugin

bPopup is a lightweight modal popup jquery 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.

bPopup →

Moa Modal

Moa Modal is a jQuery modal plugin that comes with custom animations and positioning

Moa Modal is a jQuery modal plugin that comes with custom animations and positioning.

Moa Modal →

Sieve – Add an Interactive Search Filter to Any Content

Sieve allows you to quickly add an interactive search filter to any block of content

Sieve allows you to quickly add an interactive search filter to any block of content.

Sieve →

Typography & Text Plugins

FlowType.JS

the FlowType jquery plugin lets you configure the font size and line height ratios

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

FlowType.JS →

Squishy

Squishy is a jQuery plugin that automatically resizes text

Squishy is a jQuery plugin that automatically resizes text to exactly fit the container.

Squishy →

Succinct

Succint is a minimal jQuery plugin that can truncate multiple lines of text

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.

Succinct →

Textillate.js – A Plugin for CSS3 Text Animations

Textillate.js is a jquery Plugin for CSS3 Text Animations

Textillate.js is a simple plugin for applying amazing CSS3 animations to any block of text.

Textillate.js →

…and all the rest…

CLNDR.js

 CLNDR.js

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.

CLNDR.js →

Snap.svg

The Snap.svg JavaScript library makes working with your SVG assets very easy

The Snap.svg JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM.

Snap.svg →

jQuery-Mapael

Mapael is a jQuery plugin based on raphael.js that allows you to display dynamic vector maps

Mapael is a jQuery plugin based on raphael.js that allows you to display dynamic vector maps.

jQuery-Mapael →

FailSafe

plugins jquery FailSafe

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.

FailSafe →

Chardin.js

Chardin.js creates simple overlay instructions for web apps

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.

Chardin.js →

Bigfoot

Bigfoot is a jQuery plugin that creates exceptional footnotes

Bigfoot is a jQuery plugin that creates exceptional footnotes.

Bigfoot →

jQuery Pin

jQuery Pin will pin any element to the top of a container as you scroll down the page

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.

jQuery Pin →

PowerTip

PowerTip is a jQuery tooltip plugin with some advanced features

PowerTip is a jQuery tooltip plugin with some advanced features like hover intent testing, tooltip queueing, and support for complex data.

PowerTip →

jQuery Builder – Easily Build a Custom Version of jQuery

jQuery Builder allows you to 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.

jQuery Builder →

Author: (584 Posts)

Paul Andrew is the editor and founder of Speckyboy Design Magazine.

Comments