5 Cool jQuery Plugins to Dress Up Your Interface

It’s no secret – we love jQuery. There’s always a reason for these things, you know! If you haven’t ever used jQuery, don’t get too scared. We’ll show you just a small bit so you can get started using it ASAP! There is a lot of documentation, tutorials, cheatsheets, more tutorials… need we say more?

Including jQuery.js

  • Step 1: Go to jQuery’s website and download the latest version of jQuery.
  • Step 2: Place the “jquery.js” file in your site’s root folder or in a subfolder (like “/scripts” or something similar)
  • Step 3: Include the script with the following code (replace the name of “jquery.js” with the name and directory that you have selected). Place this line in your header.
    [html]<script src="scripts/jquery.js" type="’text/javascript’"></script></li>[/html]

Now, you can readily write with the jQuery library by opening a script tag in your header below your jQuery include.
Note: to include a plugin, follow the same process, and be sure to place the plugin include below the jQuery include.

The Plugins

Thickbox

thickbox
Developed by Cody Lindley, Thickbox offers an easy-to-use lightbox for almost any kind of content. There is extensive instructions on its use, but the easiest way to get it working is to simply add a class of “thickbox” to a link to an image or content to activate the plugin. To create a gallery of images (or other content), add a rel of “gallery” (it doesn’t have to be gallery – it can be anything you choose). So a simple image gallery may look like this.
[html]
<a href="largeimage1.jpg" alt="largeimage1" class="thickbox" rel="galleryname"><img src="thumbimage1.jpg" alt="thumbimage1"></a>
<a href="largeimage2.jpg" alt="largeimage2" class="thickbox" rel="galleryname"><img src="thumbimage2.jpg" alt="thumbimage2"></a>
<a href="largeimage3.jpg" alt="largeimage3" class="thickbox" rel="galleryname"><img src="thumbimage3.jpg" alt="thumbimage3"></a>
<a href="largeimage4.jpg" alt="largeimage4" class="thickbox" rel="galleryname"><img src="thumbimage4.jpg" alt="thumbimage4"></a>
[/html]
This would generate a set of thumbnails that whenever clicked would open the corresponding larger image in the Thickbox. Thickbox is a beautiful, simple lightbox. Check it out.

Form Validation Plugin

form
This is a very standard plugin that is fairly simple to use, and produces fantastic results. It goes a little more in depth, so head on over to Mike Alsup’s page to learn how to use it. If you’re going to be using a form for sign-up or contact on your site, this will provide instant feedback for both validation and submission.

Table of Contents Plugin (via FuelYourCoding)

toc
This plugin allows for a lot of really cool automatic table-of-contents building based on h1-h6 tags. Read a bit more over on FuelYourCoding.

jGrowl

growl
Awesome functionality here. If you’ve never used Growl, it is a very cool program that allows notifications to overlay at the top right part of your screen. jGrowl does the same thing, except with online content. Alerts can now be shown in a much more stylish fashion. Many options are included in the plugin. Check it out.

Kwicks

kwicks
Kwicks is inspired by effects that are a part of MooTools, another cool (and small) javascript library. It’s pretty self explanatory – very cool fluid navigation possibilities. Obviously, you aren’t limited to using this just as a navigation plugin. Check it out!

Conclusion

There are a TON of plugins out there for jQuery. These are five we picked out of the bunch that we like. What are some of your favorites? How about JavaScript libraries? We’d love to hear from you!

 

If you liked this article, please help spread the news on the following sites:

  • Bump It
  • Blend It
  • Bookmark on Delicious
  • Stumble It
  • Float This
  • Reddit This
  • Share on FriendFeed
  • Clip to Evernote