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?
- 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.
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.
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.
<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>
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.
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.
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.
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.