jCaption is a jQuery plugin designed to make adding captions to a page dead simple. It takes an image element and uses one of its attributes to build the markup for a caption. It allows for both arbitrary styling and markup.

Dealing with image captions on the web can be a big pain. The code structure for nearly any caption looks something like the following:

<div>
 <img src="image.gif" alt="" />
 <p>Caption Text</p>
</div>

While writing such markup for every image is merely an inconvenience for web developers, it is an impossibility for most of thier clients. Many clients use a web-based WYSIWYG editor to create and edit their pages through a CMS. It would be nearly impossible to expect them to add this markup around their images.

Using the plugin

Using the plugin is dead simple. Just use apply the .jcaption() method to the images you want:

$('img').jcaption();

By default this will take the following image:

<img src="image.jpg" alt="Some caption text" />

and produce the following markup:

<div class="caption">
 <img src="image.jpg" alt="Some caption text" />
 <p>Some caption text</p>
</div>

The options will allow you to control the elements and classes that the plugin produces. Additionally, to accomodate text editors, the plugin can copy the styling that was applied to the image to the caption instead, and take the images "align" attribute and append it to the caption class. So for text editors that place images using align="left" you can instead have the plugin add "left" as a class to the caption so that you can place the entire caption using your stylesheet.

Options

$('img').jcaption({
 //Element to wrap the image and caption in
 wrapperElement: 'div',
 
 //Class for wrapper element
 wrapperClass: 'caption',
 
 //Caption Element
 captionElement: 'p',
 
 //Attribute of image to use as caption source
 imageAttr: 'alt',

 //If true, it checks to make sure there is caption copy before running on each image
 requireText: true,
 
 //Should inline style be copied from img element to wrapper
 copyStyle: false,
 
 //Strip inline style from image
 removeStyle: true,
 
 //Strip align attribute from image
 removeAlign: true,
 
 //Assign the value of the image's align attribute as a class to the wrapper
 copyAlignmentToClass: false,

 //Assign the value of the image's float value as a class to the wrapper
 copyFloatToClass: true,

 //Assign a width to the wrapper that matches the image
 autoWidth: true,
 
 //Animate on hover over the image
 animate: false,
 
 //Show Animation
 show: {opacity: 'show'},
 showDuration: 200,
 
 //Hide Animation
 hide: {opacity: 'hide'},
 hideDuration: 200 
});