jQuery Captify Plugin v1.1.3

Captify is a plugin for jQuery written by Brian Reavis (@brianreavis) to display simple, pretty image captions that appear on rollover. It has been tested on Firefox, Chrome, Safari, and the wretched Internet Explorer. Captify was inspired by ImageCaptions, another jQuery plugin for displaying captions like these.

The goal of Captify is to be easy to use, small/simple, and completely ready for use in production environments (unlike ImageCaptions at the moment). Also, it's only 2.3kb!

What do you think? Feel free to drop by my blog and/or follow me on twitter!

Samples:

Using the ALT-attribute method:

Aspen Leaf Today, we part. Aspen Leaves Out the window...
<img src="theimage.jpg" class="captify" alt="Caption Text" />

DIV-linked-by-REL-attribute Method:

Gannett Summit Ridge
Flickr — Gannett Peak, Wyoming

<img src="theimage.jpg" class="captify" rel="caption1" />
<div id="caption1"> Whatever caption you like </div>

How do I use it?

First off, if you haven't downloaded it already, download Captify here.

$(function(){
	$('img.captify').captify({
		// all of these options are... optional
		// ---
		// speed of the mouseover effect
		speedOver: 'fast',
		// speed of the mouseout effect
		speedOut: 'normal',
		// how long to delay the hiding of the caption after mouseout (ms)
		hideDelay: 500,	
		// 'fade', 'slide', 'always-on'
		animation: 'slide',		
		// text/html to be placed at the beginning of every caption
		prefix: '',		
		// opacity of the caption on mouse over
		opacity: '0.7',					
		// the name of the CSS class to apply to the caption box
		className: 'caption-bottom',	
		// position of the caption (top or bottom)
		position: 'bottom',
		// caption span % of the image
		spanWidth: '100%'
	});
});

This javascript above should be wrapped in a <script> tag and then be placed in the <head> of your document, after you've included jquery.js and captify.tiny.js.

Note: Also, you need to copy-and-paste the necessary items out of the sample stylesheet into your own website's stylesheet. When you open it up, you'll see what needs to be copied right away.

One side-effect of the captions is that the captified images become wrapped in divs that float left. If you have text clinging to their right side, clear the float by adding this line right after the image:

<br class="c" />

If you don't want to take that route, just take out this block from the stylesheet, and that'll do the trick too :)

.caption-wrapper {
	float: left;
}

Update (February 28, 2009) v1.1:

With some great help from Dan Ryan, Captify got some love…

Update (November 30, 2009) v1.1.3: