Pixelwidth’s Favorite jQuery Plugins
This post is a bit of an extension from the previous one, Building a New Web Site Template in 8 Steps. While I’m really not a fan of roundup posts or linking to other peoples’ content just for the sake of it, I do want to show you guys these plugins because they’ve stood the test of time project after project for me. I even keep a copy of each of these in my own site template for all new projects. While there are many plugins out there that achieve similar effects, these are the ones that have worked best for me.
Before you get started with these, make sure you’ve downloaded the latest jQuery release.
qTip for tooltips
This is my go-to plugin for tooltips. It offers a vast amount of different options, the tooltips are completely customizable and you can even put dynamic content in tooltips such as youtube videos or ajax content.
Download qTip.
CurvyCorners (modified) for rounded corners
This is a modification of the original curvycorners plugin. It creates corners that are anti-aliased (translation: don’t look like crap) and also has a very tiny footprint at 13kb packed.
Download jQuery Curvy Corners
Fancybox for lightboxes
Fancybox is my favorite lightbox solution. You can display any type of content you want in a lightbox-style window and it looks great right out of the box. If you don’t like how it looks, it’s fully customizable.
Download Fancybox.
Cycle for slideshows
Cycle is aplugin for creating very robust slideshows. It allows for a lot of customization, documentation is very thorough, and it’s super easy to set up.
Download Cycle.
Hoverintent for mouse events
Hoverintent is a very cool plugin once you actually figure out what it does. Basically, it tries to determine if a user intentionally hovers over an element or just passed over it, and then fires a function based on that. Very useful if you have roll over animations set up on your site.
Download Hoverintent.
Browser Plugin for browser detection
According to the jQuery documentation, it is recommended that you not use the $.browser object to detect a user’s browser. Instead, try this plugin. It’s been tested against over 300 browsers, and can provide more information about the browser than you’ll probably need. This is great for creating layouts that work across all browsers.
Download Browser Plugin.
Nivo Slider
I just recently came across this plugin that does slideshows and does them well. I’m typically not a fan of wipe-style transitions, but it looks so clean and professional in this plugin that I had to feature it in this list. Keep in mind that while it’s been tested in most browsers, it will not render properly in IE6 (Internet Explorer 6).
Download Nivo Slider.
Besides Nivo Slider, all of these plugins work across all browsers including ie6 so you won’t have to worry about not being able to use these sweet plugins without maintaining cross-browser compatibility.
One issue you may have come across on larger projects is that you’re starting to import too many scripts. A good way to reduce the number of server requests (which will greatly improve your site’s load time) is to combine all of the absolutely necessary plugins that you plan on using into one file. If you followed along with the previous post and have a site template set up, the best place for this to go would be in your global.js file inside the js directory. Next, you can use this site to minify your script. This way, the file will be as small, and quick to load, as possible while minimizing http requests.
If you have some favorite jQuery tips that you’d like to share please post it in the comments. Thanks for reading!
