Minimal Image Caption Plugin with jQuery and CSS3 - captionjs

Minimal Image Caption Plugin with jQuery and CSS3 - captionjs
File Size: 956 KB
Views Total: 1279
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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)

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.