Join our HiFi mailing list to receive the latest news & updates

Image Captions

Overview

Easily add static or animated captions to your images.

Requirements

Javascript and a jQuery library are required to use one of an image’s attributes to build the markup for a caption.

Components

CSS:

.caption{
	font-size:12px;
	font-weight:bold;
	padding:0 0 20px 0;
}

Javascript:

$('img').jcaption({
	copyStyle: true
});

Installation

Insert an image (maybe in a page or post) and fill in the image description, or alt attribute, with the text you would like to appear as the caption. Then upload the jcaption.js file to your theme and include it in your desired template. Add the styles included above to the stylesheet and the javascript directly to the template so you can add or edit the options that are provided below. 

If you are floating your images, giving them padding or adding any other style, be sure to keep copyStyle set to “true” so the caption class does not override your image styles. 

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
});

Comments

  1. Tom's avatar
    Tom
    | Permalink
    Is this a newer version??
    Has it been tested to IE8 and IE9 etc.??

    Thank you, Tom
  2. Joel Sutherland's avatar
    Joel Sutherland
    | Permalink
    Tom,

    This is not a newer version. The only issues with IE8 or 9 would occur in the CSS.

    The plugin itself is very small and just adds wrapper elements to the image.