50 New And Crazy Cool jQuery Plugins From Year 2011

Posted in Coding, JS & AJAX, Tools, Web Design • Posted on 24 Comments

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.

1. jbar

Jbar-new-cool-jquery-plugins-2011

jbar is a jQuery plugin that transforms an unordered list <ul> into a toolbar with dropdown menus.

2. e24TabMenu

Tabmenu-new-cool-jquery-plugins-2011

e24TabMenu is a plugin written for scriptaculous. It is a tab menu that expands and collapses smoothly.

2.1. RoyalSlider – Touch-Enabled jQuery Image Gallery

RoyalSlider is easy to use jQuery image gallery with animated captions and touch support for mobile devices. Easily add unlimited number of slides and captions. Use it as image slider, image gallery, banner rotator, banner ads, or even presentation.

View Demo

3. Simple jQuery Fluid Thumbnail Menu Bar

Fluid-thumbnail-new-cool-jquery-plugins-2011

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.

4. Accordion Multilevel Menu

Accordion-new-cool-jquery-plugins-2011

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.

5. DropKick

Dropkick-new-cool-jquery-plugins-2011

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.

6. jQuery Resize And Crop

Crop-resize-new-cool-jquery-plugins-2011

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-new-cool-jquery-plugins-2011

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.

8. Simple jQuery Image Hover Effect

Image-hover-new-cool-jquery-plugins-2011

This is a simple technique to animate an image when hovering using jQuery’s animate() effect.

9. Easy Image Zoom

Image-zoom-new-cool-jquery-plugins-2011

Easy Image Zoom gives you the opportunity to see large details of the product while moving the cursor over a medium sized image.

10. ImageLens

Image-lens-new-cool-jquery-plugins-2011

Use this jQuery plug-in to add lens style zooming effect to an image,

11. ImageSelect

Image-select-new-cool-jquery-plugins-2011

ImageSelect is a jQuery plugin that allows the user to select an image by means of a nice looking dropdown.

12. jQuery Mapz

Maps-new-cool-jquery-plugins-2011

With Mapz you can easily create draggable image maps by just calling one function and by using some simple and clean HTML mark-up.

13. jQuery Image Gallery

Image-gallery-new-cool-jquery-plugins-2011

Image Gallery with Lightbox effect and slideshow functionality for jQuery UI.

14. JbhSlider

Jbhslider-new-cool-jquery-plugins-2011

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.

15. jQuery.slideBanjo

Slidebanjo-new-cool-jquery-plugins-2011

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.

15.1. Estro – jQuery Ken Burns & swipe effect slider

This jQuery plugin uses unobtrusive javascript to transform a block of simple HTML markup into a gorgeous elegant slider, which can be completely customized using HTML5 data attributes. The markup is valid HTML5 and SEO optimized, with all content always being available to search engines. When using this plugin, your page layout will be consistent even if javascript has been disabled.

This slider includes a smooth and powerful Ken Burns effect which is completely configurable and compatible with all major browsers (including ie7 to ie9, Firefox Chrome, Opera, Safari) and mobile platforms like iphone / ipad. If the Ken Burns effect is not your thing, that’s OK because the “Estro” slider also includes a 2-way “Swipe” mode with configurable transitions.

View Demo

16. Slides

Slides-new-cool-jquery-plugins-2011

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.

17. jShowOff

Jshowoff-new-cool-jquery-plugins-2011

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

Tiny-carousel-new-cool-jquery-plugins-2011

Tiny Carousel is a lightweight carousel for sliding html based content. It was built using the javascript jQuery library. Tiny Carousel was designed to be a dynamic lightweight utility that gives webdesigners a powerfull way of enhancing a websites user interface.

19. gSlider

Gslider-new-cool-jquery-plugins-2011

gSlider is an interactive image slider built on jQuery. It is versatile, lightweight and easy to implement in any website or web applications.

20. Craftyslide

Craftyslide-new-cool-jquery-plugins-2011

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

Wysiwym-new-cool-jquery-plugins-2011

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.

22. leanModal

Ieanmodal-new-cool-jquery-plugins-2011

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.

23. jQuery-preloader

Preloader-new-cool-jquery-plugins-2011

This jQuery plugin preloads CSS, JS, HTML and images with visual loader, fast and very small (~2Kb).

24. Zebra_Dialog

Zebra-dialog-new-cool-jquery-plugins-2011

Zebra_Dialog is a small (4KB minified), compact (one JS file, no dependencies other than jQuery 1.5.2+) and highly configurable dialog box plugin for jQuery, meant to replace JavaScript’s alert and confirmation dialog boxes and built using the jQuery Plugin Boilerplate.

25. Double Vision

Double-vision-new-cool-jquery-plugins-2011

A jQuery 1.6.1 plugin used for moving text from input’s to textarea.

26. Textarea Code Editor

Code-editor-new-cool-jquery-plugins-2011

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

Easy-paginate-new-cool-jquery-plugins-2011

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.

28. Activity Indicator

Activity-indicator-new-cool-jquery-plugins-2011

Activity Indicator is a resolution independent indicator that works in any browser.

29. jQuery File Upload

File-upload-new-cool-jquery-plugins-2011

jQuery File Upload is a jQuery based lightweight file uploader with multiple file upload and drag&drop support.

30. Color Animation

Color-animation-new-cool-jquery-plugins-2011

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.

30.1. Fancy Music Player V2.0

Player works like this  – first it detects if Flash Player 9 or higher is installed. If yes a hidden flash movie(swf) will be used, that communicates via javascript with the HTML user interface. If no Flash Player is installed, the new HTML5 audio engine will be used, which is supported by all iToys(iPhone, iPad etc.).

View Demo

31. jQuery Formwizard

Form-wizard-new-cool-jquery-plugins-2011

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.

32. jQuery Spinner Control

Spinner-control-new-cool-jquery-plugins-2011

Converts the text input to a spinner control. This plugin works fine with ASP.net for the post backs.

33. jEscape

Jescape-new-cool-jquery-plugins-2011

This extension captures all the keydown events faster and less time writing code, you’ll profit.

34. jPaginator

Paginator-new-cool-jquery-plugins-2011

A plugin for animated pagination, with auto-acceleration, a slider, and highly customizable.

35. Snippet

Snippet-new-cool-jquery-plugins-2011

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.

36. HTML5 jQuery Music Player

Html5-music-player-new-cool-jquery-plugins-2011

A HTML5 music player that uses an awesome design created by Orman Clark and jPlayer.

37. jQuery Link Preview

Link-preview-new-cool-jquery-plugins-2011

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

Qr-code-new-cool-jquery-plugins-2011

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

Tagbox-new-cool-jquery-plugins-2011

This is a jQuery plugin to help add tags like input in your forms.

40. jRumble

Rumble-new-cool-jquery-plugins-2011

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.

41. MobilyMap

Mobily-map-new-cool-jquery-plugins-2011

MobilyMap is a jQuery plugin (7KB) that can create a Google Maps-like, draggable interface from any image.

42. Grid Navigation

Grid-navigation-new-cool-jquery-plugins-2011

jQuery plugin for achieving some neat grid navigation effects.

43. Simple Overlay

Overlay-new-cool-jquery-plugins-2011

A jQuery Plugin for easily adding lightweight, flexible overlays to your projects.

44. diagonalFade

Diagonal-fade-new-cool-jquery-plugins-2011

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-new-cool-jquery-plugins-2011

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.

46. jQuery Credit Card Validation

Credit-card-new-cool-jquery-plugins-2011

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-new-cool-jquery-plugins-2011

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.

48. jQuery.folderPreview

Folder-preview-new-cool-jquery-plugins-2011

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.

49. jQuery Lifestream

Lifestream-new-cool-jquery-plugins-2011

Show a stream of your online activity with jQuery

50. QuoVolver

Quovolver-new-cool-jquery-plugins-2011

Quovolver is a simple extension for jQuery that takes a group of quotes and displays them on your page in an elegant way.

111 Written ArticlesWebsite

Works at 1stwebdesigner, studies photography at ISSPand seeks to enjoy life. You can check out his photography blog and follow him on twitter.

24 Comments Best Comments First
  • nikos lianeris

    Wednesday, July 13th, 2011 09:29

    11

    great collection!I’ve allready used jPaginator and it really rocks! :) Thank you for sharing

    +6
  • Nikhil Malhotra

    Tuesday, July 12th, 2011 20:53

    10

    Great collection.Thanks for sharing Daniels Mekšs

    +3
  • Tarique

    Sunday, July 10th, 2011 13:17

    3

    Very very good jquery resource indeed. Thanks.

    +3
  • Jacques Bodin-Hullin

    Tuesday, July 12th, 2011 16:51

    9

    Thanks for my plugin, it’s a very good surprise !!

    Soon a Magento module and maybe a Prototype version…
    In its second version, the plugin will allow full customization of the effect used.

    Be patient !

    +2
  • Jeremy Hawes

    Monday, July 11th, 2011 20:10

    7

    Definitely some great uses of jQuery – I especially liked the Accordian side panel nav menu – will be great for business sites.

    +2
  • David Y

    Tuesday, July 12th, 2011 06:43

    8

    This is a truly resourceful post. Found quite a few things I’m looking forward to try out.

    +1
  • Thanish

    Monday, July 11th, 2011 06:12

    4

    Really awesome collection. Just bookmarked it for future.

    0
  • Charles Angell

    Sunday, July 10th, 2011 18:37

    2

    Excellent post – thanks

    0
  • Gavin

    Monday, July 11th, 2011 10:42

    5

    Oooo bookmarked!! Nothing beats a epic list of jquery plugins. Really love the HTML 5 music player and image hover over effect! Good work guys, another great post. Really enjoy visiting this blog every morning!

    0
  • J. Ashley

    Monday, July 11th, 2011 18:22

    6

    I was wondering how you make money blogging and around how much you make? Btw… love the jquery lists. Very helpful for people who are overwhelmed at all that jquery has to offer.

    0
  • Jeff Adams

    Sunday, July 10th, 2011 15:35

    1

    Neat round up. Particularly like the image zooming plugins, I think I might be usig one or two of these.
    The file upload jquery widget looks pretty neat, can see myself putting that into some of my admin templates.
    Good article, thanks for sharing.

    0
  • Gilberto Ramos

    Wednesday, July 13th, 2011 15:03

    12

    Crazy collection! Thanks..! =D

    0
  • Chris

    Wednesday, July 13th, 2011 17:37

    13

    jquery has definitely come a long way. I especially like the flexibility it offers with image/video galleries such as cloud zoom.

    0
  • Stanley

    Wednesday, October 5th, 2011 12:34

    21

    Wow. Such big list. Thanks for share.

    0
  • Adeel

    Wednesday, December 21st, 2011 19:03

    22

    Yup its really very nice collection!

    0
  • Eda Can

    Sunday, January 1st, 2012 15:12

    23

    very nice. It will be useful for my next project

    0
  • babeltekno

    Friday, April 6th, 2012 13:43

    24

    nice collection, :-)

    0
  • Adrian

    Saturday, September 24th, 2011 16:00

    20

    Some nice new jQuery plugins here. Thanks for sharing!

    0
  • Reg

    Wednesday, September 14th, 2011 19:57

    18

    I’m new to wordpress and happened on you site – than you absolutley brill.
    I have one request. What is the popup bottom right? I would dearly love to use it to jump to the top of my pages.
    Thanks again.

    0
  • Alex

    Monday, July 18th, 2011 00:47

    14

    Thanks. great stuff!

    0
  • Brian

    Monday, July 25th, 2011 13:02

    15

    Awesome List, Thanks for the share

    0
  • Marisa T.

    Thursday, September 8th, 2011 18:34

    16

    Thanks for this lovely blog! Got new ideas for more designs from looking at all the cool J-Query stuff!

    0
  • Aj Banda

    Monday, September 12th, 2011 04:41

    17

    I love using jquery on my sites that I create, it’s smooth and make them interactive!

    nice share!

    0
  • babeltekno

    Friday, April 6th, 2012 13:43

    24

    nice collection, :-)

    0
  • Eda Can

    Sunday, January 1st, 2012 15:12

    23

    very nice. It will be useful for my next project

    0
  • Adeel

    Wednesday, December 21st, 2011 19:03

    22

    Yup its really very nice collection!

    0
  • Stanley

    Wednesday, October 5th, 2011 12:34

    21

    Wow. Such big list. Thanks for share.

    0
  • Adrian

    Saturday, September 24th, 2011 16:00

    20

    Some nice new jQuery plugins here. Thanks for sharing!

    0
  • Reg

    Wednesday, September 14th, 2011 19:57

    18

    I’m new to wordpress and happened on you site – than you absolutley brill.
    I have one request. What is the popup bottom right? I would dearly love to use it to jump to the top of my pages.
    Thanks again.

    0
  • Aj Banda

    Monday, September 12th, 2011 04:41

    17

    I love using jquery on my sites that I create, it’s smooth and make them interactive!

    nice share!

    0
  • Marisa T.

    Thursday, September 8th, 2011 18:34

    16

    Thanks for this lovely blog! Got new ideas for more designs from looking at all the cool J-Query stuff!

    0
  • Brian

    Monday, July 25th, 2011 13:02

    15

    Awesome List, Thanks for the share

    0
  • Alex

    Monday, July 18th, 2011 00:47

    14

    Thanks. great stuff!

    0
  • Chris

    Wednesday, July 13th, 2011 17:37

    13

    jquery has definitely come a long way. I especially like the flexibility it offers with image/video galleries such as cloud zoom.

    0
  • Gilberto Ramos

    Wednesday, July 13th, 2011 15:03

    12

    Crazy collection! Thanks..! =D

    0
  • nikos lianeris

    Wednesday, July 13th, 2011 09:29

    11

    great collection!I’ve allready used jPaginator and it really rocks! :) Thank you for sharing

    +6
  • Nikhil Malhotra

    Tuesday, July 12th, 2011 20:53

    10

    Great collection.Thanks for sharing Daniels Mekšs

    +3
  • Jacques Bodin-Hullin

    Tuesday, July 12th, 2011 16:51

    9

    Thanks for my plugin, it’s a very good surprise !!

    Soon a Magento module and maybe a Prototype version…
    In its second version, the plugin will allow full customization of the effect used.

    Be patient !

    +2
  • David Y

    Tuesday, July 12th, 2011 06:43

    8

    This is a truly resourceful post. Found quite a few things I’m looking forward to try out.

    +1
  • Jeremy Hawes

    Monday, July 11th, 2011 20:10

    7

    Definitely some great uses of jQuery – I especially liked the Accordian side panel nav menu – will be great for business sites.

    +2
  • J. Ashley

    Monday, July 11th, 2011 18:22

    6

    I was wondering how you make money blogging and around how much you make? Btw… love the jquery lists. Very helpful for people who are overwhelmed at all that jquery has to offer.

    0
  • Gavin

    Monday, July 11th, 2011 10:42

    5

    Oooo bookmarked!! Nothing beats a epic list of jquery plugins. Really love the HTML 5 music player and image hover over effect! Good work guys, another great post. Really enjoy visiting this blog every morning!

    0
  • Thanish

    Monday, July 11th, 2011 06:12

    4

    Really awesome collection. Just bookmarked it for future.

    0
  • Tarique

    Sunday, July 10th, 2011 13:17

    3

    Very very good jquery resource indeed. Thanks.

    +3
  • Charles Angell

    Sunday, July 10th, 2011 18:37

    2

    Excellent post – thanks

    0
  • Jeff Adams

    Sunday, July 10th, 2011 15:35

    1

    Neat round up. Particularly like the image zooming plugins, I think I might be usig one or two of these.
    The file upload jquery widget looks pretty neat, can see myself putting that into some of my admin templates.
    Good article, thanks for sharing.

    0

Comments are closed.

54.161.143.22 - unknown - unknown - US