An open-source jQuery plugin to easily and semantically add captions to images.

  • By Eric Magnuson
  • Last update: Dec 4, 2022
  • Comments: 5

Documentation

Install using NPM:

npm install --save captionjs

Install using Bower:

bower install captionjs

Below is the basic setup for caption.js. For more info, please see captionjs.com.

$(window).load(function() {
    $('img.caption').captionjs({
		'class_name'      : 'captionjs', // Class name for each <figure>
		'schema'          : true,        // Use schema.org markup (i.e., itemtype, itemprop)
		'mode'            : 'default',   // default | stacked | animated | hidden (deprecated: hide)
		'debug_mode'      : false,       // Output debug info to the JS console
		'force_dimensions': true,        // Force the dimensions in case they cannot be detected (e.g., image is not yet painted to viewport)
		'is_responsive'   : false,       // Ensure the figure and image change size when in responsive layout. Requires a container to control responsiveness!
		'inherit_styles'  : false        // Have the caption.js container inherit box-model properties from the original image
	});
});

Github

https://github.com/ericmagnuson/captionjs

Comments(5)

  • 1

    Consider improving the responsiveness

    The js adds a width inline style to the figure div, making any image that was responsive somewhat unreliable....while responsive images will work, if a user resizes the view port the image will not rescale.

  • 2

    Make figure inherit all img styles

    As suggested by @vygandas1024, the <figure> should inherit all styles originally set on the <img>. This requires copying over all styles and then resetting all styles on the <img> apart from those needed for caption.js.

  • 3

    Captions can't generate if images haven't been painted

    If the image hasn't been painted to the screen yet (e.g., it's hidden, it's out of the viewport, etc), caption.js cannot properly determine the dimensions for the container and thus fails.

  • 4

    On resize, recalculate figcaption values

    When caption.js is being used in responsive mode, a function should be bound to the resize event to recalculate the necessary values for the figcaption as text inside the figcaption may have gone to multiple lines.

  • 5

    License support

    Luigi suggested via email to have support for license. It would feature semantically correct tags and potentially a link to the license homepage. The copyright info could be pulled automatically from the alt text string or, better yet, would be pulled from a data-copyright field.

    Here's what the resulting markup could look like:

    <figure> 
<img src="img/content/preview.jpg" alt="Alttext für das Bild" /> 
<figcaption>Caption goes here</figcaption> 
<footer><small><!-- copyright noice --></small></footer> 
</figure>

    Edit: If the <small> tag contains a link to the license, consider using rel="license". Also, include copyright info in the schema markup.

Popular Tag

Related