30+ jQuery Plugins for Web Designers 2012

Every months or so we like to take a look at some of the best and innovative jQuery plugins from within that time. Each time we do this the jQuery lovers never ever fails to let us down. Constantly releasing plugins that are not only useful and problem solving, but also releasing plugins that can aid you with new technologies like CSS3 and HTML5.

Plugins for Forms

ComboGrid

ComboGrid, like autocomplete, when added to an input field, enables users to quickly find and select from a pre-populated list of values as they type, but in a tabular and paginated manner. ComboGrid provides keyboard navigation support for selecting an item.
ComboGrid View the Demo

Recurly.js

Recurly.js is a JavaScript library for customizable transaction forms. It helps you make secure, PCI-compliant transaction forms with fully customizable CSS.
Recurly.js View the Demo

Ideal Forms

Ideal Forms is a small framework to build powerful and beautiful online forms. It’s very easy to use and requires minimal html syntax. Absolutely everything is stylable with CSS, no images needed. Support for IE 7+, Firefox 3+, Chrome 3+, Safari 3.1+ and Opera 11+. Degrades gracefully with JavaScript disabled.
Ideal Forms View the Demo

MotionCAPTCHA

MotionCAPTCHA is a jQuery CAPTCHA plugin. It requires users to sketch the shape they see in the canvas in order to submit a form.
MotionCAPTCHA View the Demo

Smart Validate

Smart Validate is a jQuery credit card validation plugin, that makes credit card format validation a simple task. It ensures that user has entered valid credit card number before making actual transaction. Smart Validate supports the following credit cards: American Express, MasterCard, Visa, Diners Club, and Discover.
Smart Validate View the Demo

TagBox

TagBox is a jQuery plugin to help add tags like input in your forms.
TagBox View the Demo

Power PWChecker

Power PWChecker is a free jQuery plugin to ensure secure passwords for users. This simple jQuery plugin can be integrated seamlessly with any online form (sign up form/user registration form) to check password strength and give users clues for creating strong and secure passwords.
Power PWChecker View the Demo

Video Plugins

Cuepoint.js

Cuepoint.js is an open source plugin for adding cue-points and subtitles to your HTML5 video.
Cuepoint.js View the Demo

FitVids.js

FitVids.js is a lightweight, easy-to-use jQuery plugin for fluid width video embeds.
FitVids.js View the Demo

Map Plugins

jVectorMap

jVectorMap is a jQuery plugin employed to show vector maps and visualize data on HTML pages. It uses SVG in all modern browsers like Firefox 3 or 4, Safari, Chrome, Opera, IE9, while legacy support for older versions of IE from 6 to 8 is provided with VML.
jVectorMap View the Demo

Gmap3

Gmap3 View the Demo

Web Typography Plugins

Shuffle Letters Effect

This is a short tutorial that shows how to make a jQuery plugin that will shuffle the text content of any DOM element – an interesting effect that can be used in headings, logos and slideshows.
Shuffle Letters Effect View the Demo

jFontSize

The jFontSize plugin was developed to facilitate the process of creating the famous buttons A+ and A-, which alter the font size on sites with very large texts, such as blogs, journals, tutorials, etc. This tool is also used to increase the accessibility of sites, helping people who have visual problems to see better content.
jFontSize View the Demo

Lettering.js

Lettering.js is a jQuery plugin for radical web typography. Web type is exploding all over the web but CSS currently doesn’t offer complete down-to-the-letter control. Lettering.js solves that: it’s a jQuery plugin to give you that control. Kerning type, editorial design, manageable code, and in general complete control can all be easily done with Lettering.js.
Lettering.js View the Demo

Sliders, Galleries & Carousel Plugins

Skitter

Skitter is a plugin for creating great-looking slideshows. You can customize every aspect of your slideshow.
Skitter View the Demo

Mosaiqy

Mosaiqy is a jQuery plugin for viewing and zooming photo working on Opera 9+, Firefox 3.6+, Safari 3.2+, Chrome and IE7+. Photos are retrieved from a JSON/JSONP data structure and randomly moved inside the grid. All expensive animations are taken over by your GPU on recent browsers using CSS3 transitions, minimizing the CPU overhead.
Mosaiqy View the Demo

Diapo

Diapo is a free and open source jQuery slideshow plugin. You can suggest changes or improvements if you want. You can download it and use for free, you can also include it in your projects and sell it as part of a bigger work (donations are not required but asked to be considered in this case).
Diapo View the Demo

Blueberry

Blueberry is an experimental open source jQuery image slider plugin which has been written specifically to work with fluid/responsive web layouts.
Blueberry View the Demo

Craftyslide

Craftyslide is a tiny (just 2kb) slideshow built on jQuery. Craftyslide aims to be different by providing a simple, no-frills method of displaying images packaged into a small, clean and efficient plugin.
Craftyslide View the Demo

jmFullWall

jmFullWall View the Demo

Elastislide

Elastislide is a responsive jQuery carousel plugin which allows you to obtain the wipe event on an iPhone, iPad or iPod Touch.
Elastislide View the Demo

FlexSlider

FlexSlider is an awesome, fully responsive jQuery slider plugin. It has simple, semantic markup, slide and fade animations, and is supported in all major browsers so you won’t have any compatibility issues. Flexslider is built for beginners and pros alike.
FlexSlider View the Demo

Circular Content Carousel

Circular Content Carousel is a jQuery carousel that has content boxes that you can slide infinitely (circular). When clicking on the “more” link, the respective item moves to the left and a content area will slide out. Now we can navigate through the carousel where each step will reveal the next or previous content box with its expanded content. Clicking on the closing cross will slide the expanded content area back in and animate the item to its original position.
Circular Content Carousel View the Demo

Dynamic Carousel

Dynamic Carousel is a dynamic content slider and carousel, as the name implies. The way it’s dynamic is it uses percentages instead of pixel values, so it can be easily used on a responsive/flexible layout.
Dynamic Carousel View the Demo

Mobile Plugins

Overscroll

Overscroll is a jQuery plug-in that mimics the iphone/ipad scrolling experience in a browser. The plug-in adds a draggable drift to overflowed DOM elements as well as a set of fading ‘thumbs’. OverScroll runs best on Safari 5+, Chrome 5+, and Firefox 3+ but should run just fine on most modern browsers.
Overscroll View the Demo

PhotoSwipe

PhotoSwipe is a jQuery image gallery that specifically targets mobile devices.
PhotoSwipe View the Demo

Mobiscroll

Mobiscroll is a wheel scroller user control optimized for touchscreens to easily enter date and/or time. The control can easily be customized to support any custom values and can even be used as an intuitive alternative to the native select control (dropdown list). It is designed to be used on touch devices as an alternative to the jQuery UI date picker.
Mobiscroll View the Demo

Touchy Boilerplate

Touchy is a mobile boilerplate that goes beyond just an HTML/CSS template, adding performance optimization tools, hardware accelerated animation, device API, fixed positioning and much more.
Touchy Boilerplate View the Demo

jQuery.fracs

jQuery.fracs determines the fraction of an HTML element that is currently in the viewport, as well as the fraction it takes of the complete viewport and the fraction of the area that might possibly be visible. It also provides the coordinates of the visible rectangle in document, element and viewport space.
jQuery.fracs View the Demo