/ Projects

ImgCaption - A Simple, Lightweight Image Caption jQuery Plugin

Updated: January 31, 2018.

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:

Download from GitHub


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 the caption below an image. To use the plugin, just add a data-caption custom attribute with your text description to all your img elements that require text captions.

You can also customize the the text alignment of the image caption by adding an optional data-caption-align attribute. Possible values are -- left, right, or center. By default, this attribute is set to left.

     data-caption="My center-aligned image caption" 
     alt="My image" 
     title="My image title" 


The following snippets shows the different text caption alignments available. You can refresh this page to see the plugin in action using different images.

Left Aligned

     data-caption="Left-aligned image caption" 
     alt="My image" 
     title="Image title">

My image

Right Aligned

     data-caption="Right-aligned image caption" 
     alt="My image" 
     title="Image title" 

My image


     data-caption="Center-aligned image caption" 
     alt="My image" 
     title="Image title" 

My image


Include jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/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

     data-caption="My awesome image caption" 
     alt="my image" title="My awesome image title">

Call the plugin:

$(window).load(function() {

Or with options

 $(window).load(function() {

Available Options

  • textColor {string} default:#333 - The text color of text caption.
  • fontSize {string} default:.82em - The font size.
  • fontStyle {string} default:italic - font style default.
  • lineHeight {string} default:1rem - Line height default setting.

Optional Attribute

Use the optional attribute data-caption-align to change the text alignment of the image caption. Possible values are: left, right, or center. It defaults to left if not specified.


jQuery is required, tested on 2.x or higher.