With 2011 a little over half over itÔÇÖs the right time to look at, and uncover, the current trends of web design and development. ItÔÇÖs sure been a helluva ride for jQuery and itÔÇÖs growth just doesnÔÇÖt stop. With more than 40% of websites using jQuery now itÔÇÖs no longer possible to ignore this efficient, powerful and lightweight tool.
jQuery gives developers the chance to enrich websites with amazing elements without the need to write dozens of lines of code. This article presents 50 advanced, cutting-edge yet simple jQuery plugins that will enhance your web experience drastically.
jbar is a jQuery plugin that transforms an unordered list
<ul> into a toolbar with dropdown menus.
e24TabMenu is a plugin written for scriptaculous. It is a tab menu that expands and collapses smoothly.
The idea of a fluid thumbnail bar is simple: create a list of thumbnails within a space where the overflow can be flipped through page by page.
The plugin has a boolean initialization option accordion. If you set this value to ÔÇťtrueÔÇŁ the menu behaves as an accordion menu. The irrelevant menu items are closed while the relevant slides open.
Creating custom dropdowns is usually a tedious process that requires a ton of extra setup time. Oftentimes lacking conveniences that native dropdowns have such as keyboard navigation. DropKick removes the tedium and lets you focus on making the menu┬álook good.
jQuery Resize And Crop (jrac) is a jQuery plugin that build a viewport around a given image permitting a person to visually resize an image and place a crop. Then it is
possible to use the coordinates data for any purpose.
7. Cloud Zoom
Cloud Zoom is a jQuery image zoom plugin, a comparable alternative to products such as Magic Zoom. Compared to the popular jQZoom plugin, Cloud Zoom is smaller, has more features and more robust compatibility across browsers.
This is a simple technique to animate an image when hovering using jQueryÔÇÖs animate() effect.
Easy Image Zoom gives you the opportunity┬áto see large details of the product while moving the cursor over a medium sized image.
Use this jQuery plug-in to add lens style zooming effect to an image,
ImageSelect is a jQuery plugin that allows the user to select an image by means of a nice looking dropdown.
12. jQuery Mapz
With Mapz you can easily create draggable image maps by just calling one function and by using some simple and clean HTML mark-up.
Image Gallery with Lightbox effect and slideshow functionality for jQuery UI.
JbhSlider is a fully customizable slider. You can add/remove navigation or pagination. You can set the effect, the duration and the functions after/before.
jQuery.slideBanjo is a plugin, that shows pretty slides on your site. Supports background loading of pictures, simple to customize, full documentation. Compatible with IE7 and higher.
Slides is a slideshow plugin for jQuery that is built with simplicity in mind. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.
jShowOff is a jQuery plugin for creating a rotating content module. It works by creating ÔÇśslidesÔÇÖ from the child elements (eg. <li>) inside a specified wrapper element (eg. <ul>) on which .jshowoff() is invoked. It then rotates through the slides, with options for controls, links, and more.
18. Tiny Carousel
gSlider is an interactive image slider built on jQuery. It is versatile, lightweight and easy to implement in any website or web applications.
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.
21. JQuery Wysiwym
JQuery-Wysiwym is a wysiwym (What You See Is What You Mean) editor. It is not meant to be used to output HTML, it simply helps with the desired markup syntax. Currently supported are Markdown, MediaWiki, and BBCode.
A super simple modal window plugin that works with your CSS. Perfect for hidden page content. Uber light at just 780 bytes (minified). Flexible width & height, image free, supports multiple instances on one page. Great for login, sign up & alert panels, etc.
This jQuery plugin preloads CSS, JS,┬áHTML and images with visual loader, fast and very small (~2Kb).
25. Double Vision
A┬ájQuery 1.6.1 plugin used for moving text from inputÔÇÖs to textarea.
This plugin transforms textareas into code editors with the following advantages: indentation with the Tab key, intelligent home key, auto indent on enter.
27. Easy Paginate
This plugin allows you to browse easily through the list of items with pagination controls. It is very easy to implement and very lightweight so it might come in handy to use in your own projects.
Activity Indicator is a resolution independent indicator that works in any browser.
jQuery File Upload is a jQuery based lightweight file uploader with multiple file upload and drag&drop support.
30. Color Animation
With jQueryÔÇÖs animate function, you can animate all kinds of css-properties. WhatÔÇÖs really missing from jQuery is animating colors. This plugin will add this feature.
The form wizard plugin is a jQuery plugin which can be used to create wizard like page flows for forms without having to reload the page in between wizard steps.
Converts the text input to a spinner control. This plugin works fine with ASP.net for the post backs.
This extension captures all the keydown events faster and less time writing code, youÔÇÖll profit.
A plugin for animated pagination, with auto-acceleration, a slider, and highly customizable.
Snippet is a jQuery syntax highlighting plugin built on top of the SHJS script found on SourceForge. Snippet provides a quick and easy way of highlighting source code passages in HTML documents.
A HTML5 music player that uses an awesome design created by Orman Clark and jPlayer.
jLinkPreview is a plug-in for jQuery Library which simply allows you to see a linkÔÇÖs preview image before you visit them by just hovering on it. Link preview will appear by your cursor when you hover.
38. My QR Code
This plugin generate QR code for mobile devices using Google Chart API with jQuery. By default, the plugin will generate the QR code for the URL of the page. You can also specify the text, encoding and size of the QR code.
39. jQuery TagBox
This is a jQuery plugin to help add tags like input in your forms.
jRumble is a jQuery plugin that rumbles, vibrates, shakes, and rotates any element you choose. ItÔÇÖs great to use as a hover effect or a way to direct attention to an element. You can control the X, Y, and rotation range, the speed, and event trigger for the rumble.
MobilyMap is a jQuery plugin (7KB) that can create a Google Maps-like, draggable interface from any image.
42. Grid Navigation
jQuery plugin for achieving some neat grid navigation effects.
43. Simple Overlay
A jQuery Plugin for easily adding lightweight, flexible overlays to your projects.
diagonalFade is a jQuery plugin allowing you to easily specify direction, fade-in, fade-out, and a host of other options to a grouping of elements. All you have to do is import it, specify the container to which the group of items resides, and poof, youÔÇÖre off and away.
45. Smart Spin
Smart spin is a jQuery spin button plugin that mimics the very common windows spin button control. Smart spin allows you to select a value between minimum and maximum values using either mouse or keyboard. You can also enter a value via keyboard.
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.
47. Ajax PayPal Cart
AJAX PayPal Cart is a easy to use JQuery plugin for web developer to add a full function shopping cart in their website. The AJAX cart can included a cart widget which allow display of cart information easily. Support PayPal Website Payment Standard.
jQuery.folderPreview is a jQuery plugin that takes a series of images and positions them so that they appear within a folder graphic. This enhances the attractiveness of a browsing UI system, allowing the user to visualize the contents of the folder.
Show a stream of your online activity with jQuery
Quovolver is a simple extension for jQuery that takes a group of quotes and displays them on your page in an elegant way.