Minimal Image Caption Plugin with jQuery and CSS3 - captionjs

Captionjs is a lightweight jQuery plugin that makes use of HTML5 figure/figcaption and CSS3 transitions to add an animated text & caption to your image.

Basic Usage:

1. Include jQuery javascript library and the jQuery Captionjs javascript and CSS files in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script src="jquery.caption.js" type="text/javascript"></script>
<link rel="stylesheet" href="captionjs.css"/>

2. Include Html5 shim for old IE browsers.

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

3. Create an image caption for your image using alt or data-caption attribute.

<img id="example" class="caption" src="demo.jpg" data-caption="Image Caption"/>

4. Call the plugin on the image and you're done.

<script type="text/javascript">
$(window).load(function(){
$('img#example').captionjs();
});
</script>

5. Options and defaults.

$('img#example').captionjs({

  // Class name assigned to each <figure>
  'class_name'      : 'captionjs', 

  // Use schema.org markup (i.e., itemtype, itemprop)
  'schema'          : true,    

  // default | stacked | animated | hidden
  'mode'            : 'default', 

  // Output debug info to the JS console
  'debug_mode'      : false,       

  // Force the dimensions in case they can't be detected
  // e.g., image is not yet painted to viewport
  'force_dimensions': false,     

  // Ensure the figure and image change size when in responsive layout. 
  // Requires a container to control responsiveness!  
  'is_responsive'   : false,

  // Have the caption.js container inherit box-model properties from the original image
  'inherit_styles'  : false        

});

6. Style the image caption via CSS.

.captionjs, .captionjs figcaption {
...
}
.captionjs figcaption {
...
}

Change log:

v1.0.2 (2017-02-04)

• update

v0.9.8 (2014-10-16)

• update

v0.9.6 (2014-09-03)

• Adding options for responsive sites

v0.9.5 (2014-03-29)

• Fixed sizing error
• Always forcing dimensions if option is set (regardless of whether size can be detected)

---

This awesome jQuery plugin is developed by ericmagnuson. For more Advanced Usages, please check the demo page or visit the official website.