4 bits of jQuery used on this site

Wednesday the 26th of March, 2008 at 2:40 pm

This site uses the popular jQuery framework to power its javascript and I thought I would share which plugins and snippets I have used.

LavaLamp

Probably the first plugin that people notice is the lavalamp menu used in the navigation at the top. It is really easy to use and customise, and I happen to think that it looks really good! The menu can be styled however you wish, in fact it was originally intended to have the background stretch the length of the link but I have set the background to stretch and kept the background image to stay in the centre (something that I may write in more detail about at a later date).

Animated Hover Effect #1 (from WebDesignersWall)

The home page and the work page both use this effect to display more information about items of work. I added an extra line that adds the class needed by the script so that those without javascript will see the description below the image. This whole post is fantastically useful for those starting off with jQuery and those wishing to brush up on some basic but powerful effects.

ifixpng

In case you haven’t noticed this site makes extensive use of transparent pngs, something that is infuriatingly unsupported by internet explorer 6 and below. This plugin allows you to keep using them while still supporting ie6. It does have some limitations but it has allowed me to get my site to keep one image and style for the majority of cases. If it could magically make ie6 support repeating CSS backgrounds it would be pretty much perfect.

jQuery Lightbox

Although the lightbox effect originally created by Lokesh Dhakar has become fairly over used these days I still think that it is a fantastic way to show off larger versions of images without using pop-ups or creating new pages. Since I was using jQuery anyway it made sense to use Leandro Vieira Pinho’s equally brilliant version.

There are a few other lines that aren’t that exciting and some other places I intend to implement jQuery over the coming months but in the mean time I hope you found this list useful.

Categories: Javascript/ Web Design
Comments: Comment (RSS) | Comment
Support: Digg it | Float it | Trackback