ImgCaption: A Simple, Lightweight Image Caption jQuery Plugin

There are many image caption jQuery solutions for placing captions to images, but most of the available plugins I found don’t provide the simplicity that I need and most use the alt or title tag to display text captions. I don’t find these two attributes semantically correct when you need to add a source attribution or a description of the image content.

I also wanted to use HTML5’s new tags for images, figure and figcaption, and use a custom attribute data-caption for the image captions. Many of the image caption plugins that I found use hover effects to display the text and this feature doesn’t work on mobile devices. Most of these plugins also require additional css files which add unnecessary bloat. I needed something much simpler and will allow me to format the text styling of the caption so I can reuse it for different projects. And so, I just wrote my own image caption plugin.

I’m releasing it as a free jQuery plugin and can be downloaded from my GitHub account.

Overview

ImgCaption is a simple, lightweight image caption jQuery plugin that allows you to easily add and display text captions to images using HTML5’s figure and figcaption elements.

Most of the image caption plugins available use the alt or the title attributes which don’t seem to fit the function if you are placing a long description or source attibution of the image. The title attribute is displayed by browsers as tooltips while the alt attribute is used as alternative label of the image.

The plugin uses a custom attribute, data-caption, to display caption to images. To use the plugin, just add a data-caption custom attribute to all your img elements that require text captions.

Usage

Include jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

Include plugin’s code:

<script src="js/jquery.imgcaption.min.js"></script>

Add data-caption custom attibute to img tags that needs caption

<img src="images/myimage.jpg" data-caption="My awesome image caption" alt="my image" title="My awesome image title">

Call the plugin:

$(window).load(function() {
  $('img[data-caption]').imgcaption();           
});

Or with options

 $(window).load(function() {
     $('img[data-caption]').imgcaption({
      'textColor':'#333',
      'textAlign':'right',
      'fontSize':'0.8rem',
      'fontStyle':'italic'
     });           
 });

Available Options

textColor {string} default:#333 – The text color of text caption.
textAlign {string} default:right – The text alignment of the text caption. Possible values can be – left, right, or center.
fontSize {string} default:.82em – The font size.
fontStyle {string} default:italic – font style default.
lineHeight {string} default:1rem – Line height default setting.