captioner-js
v1.0.3
Published
Beautiful and semantically correct Captions for your images
Downloads
4
Maintainers
Readme
CaptionerJs
Beautiful and semantically correct captions
Why another caption plugin ?
There are lots of caption plugins out there but CaptionerJs was propositally built to create clean and uncluttered HTML.
CaptionerJs won't burry your image inside layers of div's
, instead it makes use of figure
and figcaption
to produce uncluttered and semantically correct HTML.
You can write valid HTML, CaptionerJs will make use of title
and alt
attributes to create the caption
CaptionerJs is plugin based, you can easily add new caption types
Getting Started
Start by making sure jQuery is included in your page
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
Then include CaptionerJs in your page
<script src="/path/to/CaptionerJs.js"></script>
And finally add caption information to your images
<img
src="./images/chicory.jpg"
role="caption"
title="Chicory flower"
alt="Common chicory, Cichorium intybus, is a somewhat woody, perennial herbaceous plant usually with bright blue flowers, rarely white or pink."
/>
CaptionerJs will be applied to all elements containing a role="caption"
Configuration Options
CaptionerJs can be configured using markup:
- data-captioner-type: the type of caption to show, defaults to
static
- data-captioner-class: the css class to add to the container element, defaults to
CaptionerJs
- data-captioner-start-closed: when showing an animated caption should it start open or closed, defaults to
false
Or JavaScript
$("img").CaptionerJs({
type: "...",
cls : "...",
options: {
startClosed: ...
}
});
If using the javascript option, do not set the role="caption"
attribute on your elements
Available Caption types:
- static, the caption is on the lower end of the image
- animated, the same as static but the caption can be opened or closed
- classic, the caption is shown below the image
Examples
Point your browser to dist/demo/index.html
to see it in action or visit
the CaptionerJs home page