In this post we have collected 20 fantastic jQuery plugins, and also a huge collection of jQuery resources including: Tutorials, cheat-sheets, podcasts, ebooks… and much more.
1. jSocialize – jQuery version of mooSocialize!
Description: This is the jQuery version of the phenomenal mooSocialize (which was, obviously, built on the mooTools framework).
jSocialize allows you to integrate your bookmarks for every post on your blog, website etc.
By clicking the jSocialize button, a window will appear, which lets you choose your favorite Social Bookmarking Network. Having a thumbnail of each service beside the link, it’s easy to see and find the one of your liking.
It then opens up the page in a hovered layer. Click the X and the window closes.
Try the Demo you will love this.
Demo and Download: jSocialize Demo and Download Page.
Compatibility: It’s been tested in Firefox, IE7 and Opera 9+.
Note: This is also available as a WP plugin.
2. jQuery Virtual Tour
Description:jQuery Virtual Tour allows you to add interactivity and transform a panoramic image into a virtual tour.
This is a pretty cool plugin that will give your readers a lot more detail within your image galleries. Recommended.
Demo: jQuery Virtual Tour Demo.
Download: jQuery Virtual Tour Download.
3. jQuery Shoutbox
Description:This shoutbox is a chat-like feature for your website that allows people to quickly leave messages without any form of user registration. As with most ajax there is no need for refresh making the effect very smooth. Unlike other shoutboxes this integrates seemlessly into your theme by styling the CSS file.
Screehshot: jQuery Shoutbox Screenshot.
Download: jQuery Shoutbox Download.
Developer: Ajaxdaddy.
4. Coda Bubble Tooltip
Description: This script will help you recreate the amazing puff popup bubble effect as seen on panic.com/coda. Inessence this is probably the best tooltip script I have seen. Its not a script for every site, but implemented properly it would look amazing.
Demo: Coda Bubble Demo.
Download: Coda Bubble Download.
5. Flexigrid – Data Grid/Table
Description: This is a lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content.
Features: Resizable columns ; Resizable height and width ; Sortable column headers ; Cool theme ; Can convert an ordinary table ; Ability to connect to an ajax data source (XML and JSON[new]) ; Paging ; Show/hide columns ; Toolbar (new) ; Search (new) ; Accessible API.
Demo: Flexigrid Demo.
Download: Flexigrid Download.
6. Humanized Messages
Description: Humane Messages is a system for displaying and temporarily logging non-modal messages, for use in web applications. It’s simply a large and translucent message that’s displayed over the contents of your screen. They fade away when the user takes any action. In practice, the message is both noticeable yet unobtrusive.
Demo: Humanized Messages Demo.
Download: Humanized Messages Download.
7. Img Notes
Description: A simple way to display notes over images when you roll your mouse over the image. This is not unlike the jQuery Virtual Tour, but a lot simpler to use.
Demo: Img Notes Demo.
Download: Img Notes Download.
8. Featured Content Glider
Description:This script lets you painlessly showcase new or featured contents on your page, by turning ordinary pieces of HTML content into an interactive, “glide in” slideshow. For the ultimate in the ability to customize its look, the pagination links are also ordinary links that you define on the page, but with special CSS class names inserted when it should perform a certain task. Visit the homepage to read about all the features. Excellent.
Demo: Featured Content Glider Demo.
Download: Featured Content Glider Download.
9. Anti-aliased Rounded corners with JQuery
Description:This is a variation of the very good jQuery plugin CurvyCorners, smaller file (in at 15kb) and runs a lot faster.
Demo: Anti-aliased Rounded corners Demo.
Download: Anti-aliased Rounded corners Download.
10. jqDnR – Minimalistic Drag’n'Resize
Description:jqDnR is a lightweight plugin for jQuery that lets you drag, drop, and resize elements. jqDnR provides the all the basic elastic functionality most dialogs will need. Basic and simple and easy to use.
Demo: Anti-aliased Rounded corners Demo.
Download: Anti-aliased Rounded corners Download.
11. jScrollPane
Description: jScrollPane is a jquery plugin which allows you to replace the browsers default vertical scrollbars on any block level element with an overflow:auto style. You can easily control the apperance of the custom scrollbars using simple CSS.
Demo: jScrollPane Demo.
Download: jScrollPane Download.
12. jQuery Date Picker
Description: This jQuery plugin allows you to easily add “date picker” calendars to you HTML forms. These calendars make it much quicker, easier and less error prone for people to input certain types of dates.
Demo: jQuery Date Picker Demo.
Download: jQuery Date Picker Download.
13. jQZoom
Description: jQZoom allows you to realize a small magnifier window close to the image or images on your web page easily. Great for an image gallery.
Demo: jQZoom Demo.
Download: jQZoom Download.
14. jQuery Star Rating Plugin
This is a fully degradable plugin that creates the Star Rating interface based on a simple form structure. Simple and easy, I love it.
Demo, Download and Details: jQuery Star Rating Plugin Homepage.
15. jquery.combobox
jquery.combobox is an unobtrusive way of creating a HTML type combobox from a existing HTML Select element(s).
Features: Easy to set up ; Control over style of combobox using CSS ; Supports keyboard navigation ; Cross-browser support with Firefox 2, IE 6 and Opera 9 ; Different style of animation for dropdown ; Original Select html control is still available for access and control and reflects the user’s selection ; Works the same with forms and server-side form processing, retaining the original control’s ID and updated values.
Demo, Download and Details: jquery.combobox Homepage.
16. Scrollable HTML table
This JavaScript code can be used to convert tables in ordinary HTML into scrollable ones. No additional coding is necessary. All you need to do is put header rows (if you need them) in THEAD section, table body rows in TBODY section, footer rows (if you need them) in TFOOT section.
Demo, Download and Details: Scrollable HTML table Homepage.
17. Accessible News Slider
Accessible News Slider is only 2KB compressed! I love this, very smooth, small file, and rich in detail. Its easy to install as well. Perfect.
Demo, Download and Details: Accessible News Slider Homepage.
18. Damn Small Rich Text Editor v0.2
This piece of code creates a Rich Text Editor (“RTE”) from an IFRAME element.This script’s purpose is to provide enough basic functionality while having the smallest footprint possible.
Demo, Download and Details: Damn Small Rich Text Editor v0.2 Homepage.
19. jFlow 1.2 – The Ultra-lightweight Fluid Content Slider
jFlow is a widget to make your content slides. One popular alternative that exists out there is coda-slider. jFlow is super lightweight because it is only 2kb minified!
Demo, Download and Details: jFlow 1.2 – The Ultra-lightweight Fluid Content Slider Homepage.
20. Easy jQuery Pull Quotes
Pull quotes, lift-out quotes, or call-outs are a handy method of drawing reader’s attention to a section of text. This enhances large blocks of text so the user could skim read them without missing the really important parts.
Demo, Download and Details: Easy jQuery Pull Quotes Homepage.
Below, there are 65 Excellent jQuery Resources (tutorials,cheat sheets,ebooks,demos,plugins…). Hope they help.
jQuery Tutorials
- 1. jQuery Crash Course
- 2. Getting Started with jQuery
- 3. AutoCompleter Tutorial
- 4. Multiple File Upload Magic
- 5. jQuery for JavaScript programmers
- 6. Easy Ajax with jQuery
- 7. jQuery in 15 minutes
- 8. jQuery Tutorials for Designers
- 9. Wrapping Images With A Drop Shadow
- 10. Simplify Ajax development with jQuery
- 11. Rounded Corners
- 12. Getting Around The Minimum Height Glitch
- 13. Multiple Fancy Drop Caps
- 14. Semitransparent rollovers made easy with JQuery
- 15. Using JQuery to modify presentation while preserving document semantics
- 16. Fancy Drop Cap
- 17. Easy Multi Select Transfer with jQuery
- 18. Javascript Tooltips on Steroids
- 19. Edit In Place with AJAX
- 20. Style Sheet Switcheroo
- 21. Safer Contact Forms Without CAPTCHA’s
- 22. Photo Slider Tutorial
- 23. Text box hints
- 24. 5 JavaScript Tricks Made Easy with jQuery
- 25. JQuery Pop-up Menu Tutorial
- 26. A Quick Code Igniter and JQuery Ajax Tutorial
- 27. jQuery and XML revisited
- 28. What is JSONP?
- 29. Creating A Sliding Image Puzzle Plug-In
- 30. Slide out and drawer effect
- 31. Creating accessible charts using canvas and jQuery
- 32. jQuery liScroll – a jQuery News Ticker
- 33. Visual jQuery 1.1
jQuery Plugin Directoies
- 34. Visual jQuery 1.1
- 35. Plugins | jQuery Plugins
- 36. jQueryPlugins.com – The Home Of All jQuery Plugins
- 37.240 jQuery plugins
jQuery Video Tutorials
- 38. Jquery Smooth Scrolling Tutorial
- 39. jQuery AJAX forms Tutorial
- 40. swfupload ajax jquery drupal module image editor
- 41. jQuery 1.2.3
- 42. Drag and Drop JQuery + AJAX
- 43. jComboBox demo Tutorial
jQery Podcasts
- 44. Drupal Podcast No. 53: Javascript/JQuery in Drupal | Lullabot
- 45. Podcast 52: Javascript Libraries :: Boagworld
jQuery ebooks
jQuery Cheat Sheets
- 48. Color Charge jQuery Cheat Sheet (PNG Image, 1313×900 pixels)
- 49. Charlotte web design jQuery Cheat Sheet (pdf)
- 50. Jquery Cheat Sheet 1.2. (pdf)
Further Reading
- 51. 50+ Amazing jQuery Examples
- 52. 24 ways: Unobtrusively Mapping Microformats with jQuery
- 53. A List Apart: Articles: Frameworks for Designers
- 54. mad.ly – JQuery Ajax + Rails
- 55. 1007 + Ajax/Javascript/Dhtml examples and demos to download
- 56. QuarkRuby: Why I moved from Prototype to jQuery
- 57. XML.com: jQuery and XML
- 58. A List Apart: Articles: Prettier Accessible Forms
- 59. Agile Ajax: jQuery vs. Prototype v.JavaScript with or without training wheels
- 60. AlternateIdea: Your Mommas So Fat…Prototype vs. JQuery Edition
- 61. Ajaxian » Prototype and jQuery: A code comparison
- 62. 45+ Fresh Out of the oven jQuery Plugins
- 63. Learning jQuery » A Plugin Development Pattern
- 64. jQuery: » About client-side form validation and frameworks
- 65. Why jQuery is The Answer » Articles » Lucumr
Description : When the user clicks on the Contact link at the top of the page, the contact form will slide down. When the user submits the form they will get a message that their message has been sent successfully and within two seconds, the entire form will slide up to its original position.
Description : This tutorial will explain how to implement a simple virtual keyboard with some with jQuery. From any given login form you click the Keyboard link and a jQuery powered virtual keyboard will appear.
Description : Simulate a Digg style signup form, with its unique features such as their dynamic tooltips that give you a hint on each field that is to be filled. The same approach will be adopted for displaying validation messages.
Description : If you have lots of content to present but can not load all of it at once as it may take too long, this plugin is the answer. It is styled upon dZone’s Ajax content loading while scrolling feature.
Description : You can create a very elegant photo gallery page with this plugin, watch as the images slide in and out. Nice and smooth.
Description : Because I was bored by so many pages using lightbox and it`s clones,
Description : Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages. It's simple to use and easy on the eyes. Download the tarball, view the examples, then start enjoying the curves.
Description : The jQuery Cycle Plugin is a lightweight slideshow plugin. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and many transition effects. It also supports, but does not require, the Metadata Plugin and the Easing Plugin. Cool.
Description : InnerFade is designed to fade you any element inside a container in and out. These elements could be anything you want, e.g. images, list-items, divs. Simply produce your own slideshow for your portfolio or advertisings. Create a newsticker or do an animation. Anything.
Description : Tablesorter can turn any standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. Tablesorter can successfully parse and sort many types of data including linked data in a cell.
Description : jGoogle will wrap google AJAX search APIs in a single jQuery plugin to extract usable data. The first version will include GImageSearch.
Description : The first version of this plugin supports the ability to have shapes other than rounding on the corners.
Description : This plugin enables you to detect events triggered by the right mouse button. There is also a built-in method to disable browser context menus.
Description : Creating equal-height columns with CSS is sometimes a bear. But who needs the hassle of faux columns, “clear” divs and the rest? With this bit of jQuery, you can easily equalize the heights of any group of elements.
Description : Drop Down menus are a really convient way to fit a large menu into a really small initial space. For a long time people have just used a form element for standard drop downs, but with minimal effort you can create a much slicker effect using jQuery and CSS.
Description : This amazing music player is coded in xHTML and jQuery that makes use of mouse gestures and hotkeys. You can Click and Drag with your mouse to interact with interface’s music player or use directional keys and the spacebar instead of the mouse. Truelly amazing.
Description : This plugin allow you to turn your existing selectboxes into combo boxes, which is the mixture of text input and selectbox.
Description : This is a small jQuery plugin for creating fading hover effects. It will perform colour and image merging.
Description : You have most likely seen this feature on many sites – 3 “A”s of varying size which when clicked dynamically change the overall size of text on the page. This is a JQuery version.
Description : jQuery plugin for Twitter is simple, unobtrusive and customisable client-side method for easily embedding a Twitter feed into a web page.
Description : This is a great solution to comment boxes that are alway too small for long comment. As the user enter comment in this box, the box will stretch so the full comment will always be visible, making it easier for the user to review and edit his comment before posting it.
Description : idTabs makes adding tabs into a website very simple.The possiblities for extending this plugin are endless, have a look at the demo page for some marvellous examples. I love this plugin.
Description : A nice and simple progress bar plugin, that is very easy to implement.
Description : Simple Controls Gallery rotates and displays an image by fading it into view over the previous one, with navigation controls that pop up when the mouse rolls over the Gallery. They allow the user to play/pause, or step through to a specific image within the gallery.
Description : An excellent variation of a tooltip, that you can style via CSS (including background images) until your heart is content.
Description : CrossSlide is a jQuery plugin that implements in Javascript some common slide-show animations, traditionally only available to the web developer via Adobe Flash™ or other proprietary plugins.
Description : This plugin allows users to click your feed icon and be presented with a list of feeds to choose from. It could be your content, comments, twitter, any type of feed you like, really.
Description : This plugin is great because by simply adding the the jQuery library and the plugin, you can AJAX’ify pretty much any form without much work.
Description : A nice and small jQuery accordion menu that has a nice fade in fade out animation when users navigate around them. The html file is around 1kb,and all the files together are about 52kb.
Description : This is a live search plugin using jQuery, which searches automatically after you entered your keyword. Easily implemented into WordPress.
Description : This drilldown menu provides easy navigation of complex nested structures with any number of levels. The entire menu sits within a fixed-size area, and when a node is selected, breadcrumb links appear above the menu options to both deliver feedback and allow quick access back to nodes higher up in the hierarchy.