All About jQuery: Plugins, Tutorials and Resources
You can use these plugins to add beautiful effects and functionality in your next project. These plugins will also help you in completing your task easily.
jQuery Menu and Navigation
Collapsing Site Navigation with jQuery ( Demo | Download )
Creating a collapsing menu that contains vertical navigation bars and a slide out content area. When hovering over a menu item, an image slides down from the top and a submenu slides up from the bottom.
Beautiful Background Image Navigation with jQuery ( Demo | Download )
A beautiful navigation that has a background image slide effect. The main idea is to have three list items that contain the same background image but with a different position. The background image for each item will be animated to slide into place in different times, creating a really nice effect.
SLIDE A NAVIGATION TOOL IN YOUR PAGE ( Demo | Download )
This jquery component let you easly build a sliding panel where to insert any kind of content; it has builtin all the functionalities for managing menu lines and sub panels with accordion effect. It can get the content via ajax and therefore you can dynamically build it by passing DATA via request using the metadata attribute settable on the extruder container.
HoverFade ( Demo | Download )
The plugin is designed to be used with navigation menus, where each menu item is made from an anchor element within a list-item element. You can apply the effect to different collections of elements by supplying new trigger and faderTemplate options.
jQuery Slideshow and Image Gallery
Thumbnails Navigation Gallery with jQuery ( Demo | Download )
An extraordinary gallery with scrollable thumbnails that slide out from a navigation. The main idea is to have a menu of albums where each item will reveal a horizontal bar with thumbnails when clicked. The thumbnails container will scroll automatically when the user moves the mouse to the left or right.
Minimalistic Slideshow Gallery with jQuery ( Demo | Download )
A simple and beautiful slideshow gallery that can be easily integrated in your web site. The idea is to have a container with our slideshow and the options to view a grid of thumbnails, pause the slideshow, and navigate through the pictures. The thumbnail grid will slide out from the top and allow the user to navigate through a set of thumbnails.
HTML5 Slideshow w/ Canvas & jQuery ( Demo | Download )
You’ve probably heard a lot about the new HTML5 canvas element. As the name implies, this is a special element that allows us to create and modify graphics. In addition, we can also use it like any other element on the page – apply jQuery animations on it.
Google Wave History Slider ( Demo | Download )
It shows you how to create a Google Wave-like history slider. Using it, we will enable our visitors to go back and forth in time to view the changes that take place on a comment thread.
Beautiful Photo Stack Gallery with jQuery and CSS3 ( Demo | Download )
A Beautiful and fresh image gallery. The idea is to show the albums as a slider, and when an album is chosen, we show the images of that album as a beautiful photo stack. In the photo stack view, we can browse through the images by putting the top most image behind all the stack with a slick animation.
Fresh Sliding Thumbnails Gallery with jQuery and PHP ( Demo | Download )
A full page image gallery with a nice thumbnail area that scrolls automatically when moving the mouse. The idea is to allow the user to slightly zoom into the picture by clicking on it. The thumbnails bar slides down and the image resizes according to the screen size.
Auto-Playing Featured Content Slider ( Demo | Download )
This is an alteration based on the jQuery “Coda Slider” plugin. Each “slide” can be any kind of html content whatsoever, or be a full-size image with an overlay.
jQuery Table Manipulation
DataTables ( Demo | Download )
Scrollable HTML table ( Demo | Download )
Flexigrid ( Demo | Download )
Flexigrid 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.
Tablesorter ( Demo | Download )
tablesorter is a jQuery plugin for turning a 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. It has many useful feature.
jQuery ColumnManager plugin ( Demo | Download )
A jQuery-plugin to toggle the visibility of table columns (collapsing and expanding them) and to save the state until the next visit.
It’s supporting tables with colspans and rowspans, too!
jQuery Form Element Enhancing
Progress Bar ( Demo | Download )
It’s a very simple widget with a small API that exposes a limited number of properties and methods, but it can still be highly effective and is great for providing visual feedback to visitors on the percentage of a process is left before it is complete.
Elastic – Make your textareas grow ( Demo | Download )
This Jquery plugin makes your textareas grow and shrink to fit it’s content. It was inspired by the auto growing textareas on Facebook. The major difference between Elastic and it’s competitors is it’s weight.
File Style jQuery ( Demo | Download )
Uploadify – a multiple file upload plugin for jQuery ( Demo | Download )
Uploadify is a jQuery plugin that allows the easy integration of a multiple (or single) file uploads on your website. It requires Flash and any backend development language. An array of options allow for full customization for advanced users, but basic implementation is so easy that even coding novices can do it.
jQuery Form Wizard Plugin ( Demo | Download )
The jQuery Form Wizard Plugin will convert your regular forms into step-by-step form wizard without having to reload the page when moving from one step to another. The plugin is unobtrusive and gives you the ability to set up flow of the different steps, by creating specific routes based on user input.
Uniform – Sexy forms with jQuery ( Demo | Download )
Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility.
Autocomplete ( Demo | Download )
By giving an autocompleted field focus or entering something into it, the plugin starts searching for matching entries and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.
QuickFlip ( Demo | Download )
It flips any piece of HTML markup over like a card. The new version is faster and even easier to use—simply call the flip animation through a jQuery selector and the QuickFlip will flip the front panel to show its back.
Canimate ( Demo | Download )
If you’ve ever wanted to create an animation using a series of images for your website, but were forced to an alternative because you didn’t want to deal with the constraints of the GIF filetype, like color limit and difficult-to-deal-with FPS controls, then Canimate is the solution.
Tooltip ( Demo | Download )
In this tutorial we are going to write a simple jQuery tooltip plugin. It is going to convert the title attributes of elements withing your page, into a series of colorful tooltips. Six color themes are available, so you can easily match it with the rest of your design.
A Fancy AJAX Contact Form ( Demo | Download )
In this tutorial we are going to make an AJAX contact form which leverages modern web development techniques.
We are using PHP, CSS and jQuery with the help of the formValidator plugin for form validation and the JQTransform plugin
CLEditor ( Demo | Download )
CLEditor is an open source jQuery plugin which provides a lightweight, full featured, cross browser, extensible, WYSIWYG HTML editor that can be easily added into any web site.
IdmgAreaSelect ( Demo | Download )
imgAreaSelect is a jQuery plugin for selecting a rectangular area of an image. It allows web developers to easily implement image cropping functionality, as well as other user interface features.
- jQuery Techniques and Plugins
40 useful but obscure jQuery plug-ins that will hopefully help you improve the user experience on your websites.
- Useful jQuery Plugins for Slideshows, Graphs and Text Effects
35 powerful and effective jQuery plugins and techniques for slideshows, graphs and text effects.
- 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)
An overview of useful CSS/jQuery coding tips, tricks and techniques for visual effects, layouts and web form design to help you find solutions to the problems you are dealing with or will have to deal with in future.
- Amazing and Fresh jQuery Plugins
25 of the best newly (or, pretty close to new) released jQuery plugins.
- 40 Exceptional jQuery Interface Techniques and Tutorials
Explore the strengths of jQuery in letting web developers create impressive client-side-based user interface components.
- 40+ Excellent jQuery Tutorials
Various jQuery Tutorials for your source of inspiration.