jCaption: jQuery Image Captions with Customizable Markup, Style and Animation

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:


Caption Text

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:


By default this will take the following image:

Some caption text

and produce the following markup:

Some caption text

Some caption text

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.


//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

Download: http://www.htmldrive.net/items/download/537

Leave a comment