The jQuery library is impressive on its own, and when you add libraries like jQuery UI and jQuery Mobile, you can see exactly how powerful this tool is. But that's not all. The developers of jQuery built in an incredible extension mechanism that makes it easy for third parties to add new extensions called plug-ins to jQuery.
The details on each plug-in vary, but in general, you have to do the following to make them work:
Link to jQuery.
All of these plug-ins extend the functionality of jQuery, so they begin with the assumption that you're using jQuery in your site.
Download an additional library.
The plug-ins are all primarily JavaScript files, so you either install them on your own server or make a link. Some of the plug-ins include additional files and instructions, so be sure to check the details on the plug-in main page.
Add an init() function.
Most jQuery pages have some sort of initialization, and nearly every plug-in needs to be initialized. Be sure to add an init() function in the normal way.
Call the appropriate jQuery function.
Most of the plug-ins simply add new functions to jQuery. For the most part, running a plug-in simply requires applying new jQuery functions to a node or nodes on your page.
There are literally hundreds and hundreds of great plug-ins available. You can see a bunch of them at Andy's Books. You can find many more plug-ins at the jQuery Plugin Registry.
ipwEditor
This cool plug-in makes a part of your web page editable. You can either choose a simple form of editing or something more sophisticated with the FCKedit tool. (After you start playing with this tool, you'll immediately recognize it because you've probably used it dozens of times as a user.) The ipwEditor doesn't save your pages. You'll still need some kind of AJAX and server-side coding to do that. However, this is a very easy way to build a simplistic CMS.
Flot
Sometimes your web pages need to display some kind of data. There are a number of powerful graphing plug-ins you can use. One easy and powerful option is called Flot.
The flot program allows you to build a chart from a 2D array of data points. You can extract the data from a database, collect it from users, or whatever. The flot plug-in builds a canvas and generates one of a number of standard charts. This is an especially powerful tool if you need to do real-time graphing on your site.
Cloud
In recent years, it has become popular to offer data visualizations, or ways to illustrate data. One such mechanism is the tag cloud. Essentially this tool places a number of words in semi-random positions. In a typical tag cloud, the position, size, and color of the words are used to represent the relative strength and relationship of the terms. The cloud jQuery plug-in makes it quite easy to build your own tag clouds. You can convert any HTML list to a tag cloud. Just add an optional value attribute to each element of the list, and the plug-in automatically changes the size and weight of the element according to the value.
Tablesorter
AJAX programs often involve retrieving data, which is frequently displayed in an HTML table. The tablesorter plug-in allows the user to easily sort a table by clicking a heading.
When the user clicks on the first name header, the table is sorted by first names alphabetically. Click the first name header again to sort by first name in inverse order. The default behavior of the tablesorter allows you to sort by any header field.
Droppy
Drop-down menus have become an important usability tool in websites. There are hundreds of jQuery plug-ins to handle this feature. One good choice is droppy because it's very easy to use.
Most navigation systems are ultimately nested lists of links. The droppy plug-in simply takes a ul with a bunch of links (nested as deeply as you wish) and turns it into a nicely formatted drop-down menu.
Galleria
Image galleries are another very popular plugin topic. Many image galleries are available to play with. Galleria is a popular, powerful image gallery, and doesn't require any server-side scripting.
The default image gallery has some great features:
Images are pre-loaded: Each image is loaded into memory when the page initializes, so there will be no delay when the user switches between images.
The gallery tool automatically creates thumbnail images: The smaller index (thumbnail) images are automatically created and added to the page.
Clicking on a thumbnail expands it into the viewing area: The larger viewing area contains a larger version of the current image.
Clicking on the viewing area lets you view the next image: The default behavior lets you easily cycle through images with mouse clicks.
The output is based on CSS: Use the included CSS file to manage the display of your page, including how and where the thumbnails go, how large the display image is, and more.
It has many options: The Galleria plug-in is very customizable. It features many advanced options. Check the documentation for more.
Using Galleria is much like any other jQuery plug-in. Add the appropriate scripts, write some basic HTML, and add a magical jQuery node:
Import the scripts.
You'll need jQuery as always, as well as jquery.galleria and the galleria.css CSS style sheet.
Create a list of images.
Make each list item an image.
Add the galleria() node to the list.
That's really all you need to do.
Play with the options.
Look over the documentation for some great options, including the ability to use custom thumbnails, specify your own output container, and run callback functions when the user selects an image or thumbnail.
