Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Auto generates HTML5 image captions using figure and figcaption with JQuery
branch: master

README.md

jquery.captionate.js

I wanted to create image captions for my blog using HTML5, so I was excited to find out that HTML5 provides the new <figure> and <figcaption> elements. The HTML5 spec says that's exactly what these elements are intended for.

I wanted clients to be able to easily upload an image into their page using a content management system, then mark the image as "having a caption" using a CSS class. I realized I needed to write a JQuery script which would grab the "marked" image and automatically generate the code for <figure> and <figcaption> around the original image.

I originally wrote the script to use the image's ALT attribute to supply the caption text. However, as adrienne noted the ALT tag should not be used for image captions. See the W3C Spec. So I modified the script to use TITLE instead.

See example.html for an example of how to use the script. And, see my blog article for a complete tutorial on how the script works.

This code is licensed under the MIT license.

Written by North Krimsly of www.highintegritydesign.com

Something went wrong with that request. Please try again.