4 jQuery Plugins

Dec 16 2008

Just a couple years ago, I thought all JavaScript could do is spawn multiple popups with no end in sight. An online nuisance, if you will. Those days of popup mania are largely and thankfully gone. Now, JavaScript is used to power web page functionality that was thought to only be possible in Flash. JavaScript frameworks like script.aculo.us, Dojo, MooTools, and Yahoo! UI Library have all flourished as popular and leading frameworks out in use today. However, there is one JavaScript framework that, in my opinion, stands out from the rest of the pack: jQuery. I’m guessing the reason why the j is lowercase is because they want to be as hip as the iPhone. That’s gotta be it, right?

Why do I think jQuery is the ish? Very easy syntax, useful built-in functions, easy-to-read online documentation, blah blah blah blah blah. But what’s really great about jQuery is that, like the great Firefox web browser, it can be extended through the use of plugins. jQuery plugins are nothing more than just additional JavaScript files that are loaded after the core jQuery file has been loaded. And because jQuery has a great user-base, there are a LOT of plugins out there. Let’s highlight some plugins that will allow you to ditch Flash for good…

1. Cycle

Cycle is a simple, yet powerful slideshow plugin. You can be casual and use the standard-issue Fade effect to transition between images or be daring and use any of the multitude of effects available through this plugin. Other options include randomizing images a la iPod Shuffle, the speed of the transition; you even have the option of having callback functions that are called before or after every slide.

See a live demo of the Cycle plugin in action on the Seven Planet homepage.

Cycle plugin »

2. clueTip

Tired of the boring tooltip that you see when you hover the mouse over an image that has an ALT or TITLE tag? Well, be tired no more with the awesome clueTip plugin! You will be envy of all your friends when you show them that you can create custom, and more exciting, tooltips on web pages. You can even have clueTips have a shadow effect!!! Other options include fixing the width of the clueTip, setting the clueTip to stay visible even after the mouse has left the link the clueTip was for, and even have clueTip call another file a la AJAX-ish-style.

Want to see it in action? Go to this post on penscrappers.com and hover over those 11 scrappers in the header of the page for some clueTip goodness.

clueTip plugin »

3. Shadowbox

For those of you who don’t know (which should be none of you), a lightbox is a makeshift dialog box that is shown in front of a web page. The lightbox must be closed to continue interacting with the web page behind it. Lightboxes are good for highlighting certain images. Other lightboxes are used to show other content in addition to images.

Shadowbox is a lightbox that can show a wide array of media. In addition to images, Shadowbox also supports QuickTime, Windows Media Player, Flash, Flash video, HTML, and even external web pages. With Shadowbox, you can enlarge images with style!

Another plus about Shadowbox is that it is available as a jQuery plugin as well as a standalone JavaScript package. In fact, Shadowbox is also available in 6 flavors of JavaScript frameworks as well as its standalone version.

Want to see it in action? See it come alive on this post from penscrappers.com. Click on the big scrapbook layout on the left side of the page and see an image enlarge right before your eyes.

Shadowbox plugin »

4. sIFR

Ok, so maybe sIFR actually does use Flash, but implementing it is a lot easier with the jQuery plugin than without. sIFR is a way for web developers to use non-standard web fonts as web text without the use of image text.

Dying to see it in action? Go to this user-created post on penscrappers.com and see how the title of the scrapbook layout was made on the fly using sIFR.

sIFR plugin »

So there you have it… 4 of my favorite jQuery plugins. But of course, there are a lot more plugins out there. Which ones do you use? Share!

Posted by Don at 11:00 AM

Published in Development, eROI on Tuesday, December 16th, 2008

Tags: , , ,

3 Responses

  1. 1
    verity says:

    Nice examples! It is sooo helpful to see what you’re talking about in context :)


  2. 2
    Ryan says:

    I agree with Verity – it sinks in so much more when there are visual examples. I love learning. Nice work.


  3. 3
    Mai says:

    Who loves jQuery?!? I do, I do!