Cloister garden courtyard and St. Marien church (rear) of the Kloster Lehnin (Lehnin abbey, a German Brick Gothic era monastery near Brandenburg/Havel, in Landkreis Potsdam-Mittelmark, Brandenburg).<br>
        <span class=%22copy%22>
            © A.Savin [CC-BY-SA-3.0-2.5-2.0-1.0], <a href=%22http://commons.wikimedia.org/wiki/File%3APM08-13_img02_Kloster_Lehnin.jpg%22 target=%22_blank%22>via Wikimedia Commons</a>
        </span>

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 integrates well with schema.org Photograph schema so that all major search engines will recognize your image and the extra information about it (like title and description) potencially improving your SEO rating

Getting Started

Start by making sure jQuery is included in your page

<script src="//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:

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:

Examples

A static caption

Common chicory, Cichorium intybus, is a somewhat woody, perennial herbaceous plant usually with bright blue flowers, rarely white or pink.
The markup
<img
    src="./images/chicory.jpg"
    role="caption"
    data-captioner-type="static"
    title="Chicory flower"
    alt="Common chicory, Cichorium intybus, is a somewhat woody, perennial herbaceous plant usually with bright blue flowers, rarely white or pink."
/>

The classic caption

A tunnel made of books in the university of Prague
The markup
<img
   src="./images/books.jpg"
   role="caption"
   data-captioner-type="stacked"
   alt="A tunnel made of books in the university of Prague"
/>

An animated caption

Cloister garden courtyard and St. Marien church (rear) of the Kloster Lehnin (Lehnin abbey, a German Brick Gothic era monastery near Brandenburg/Havel, in Landkreis Potsdam-Mittelmark, Brandenburg).<br>
                    <span class=%22copy%22>
                        © A.Savin [CC-BY-SA-3.0-2.5-2.0-1.0], <a href=%22http://commons.wikimedia.org/wiki/File%3APM08-13_img02_Kloster_Lehnin.jpg%22 target=%22_blank%22>via Wikimedia Commons</a>
                    </span>
The markup

You can use html in the description as long as you urleencode it

<img
            src="./images/PM08-13_img02_Kloster_Lehnin.jpg"
            width="600"
            data-captioner-start-closed = "false"
            role="caption"
            data-captioner-type="animated"
            title="<i class=%22fa fa-info-circle%22></i> Cloister garden courtyard"
            alt="Cloister garden courtyard and St. Marien church (rear) of the Kloster Lehnin (Lehnin abbey, a German Brick Gothic era monastery near Brandenburg/Havel, in Landkreis Potsdam-Mittelmark, Brandenburg).<br>
            <span class=%22copy%22>
                &copy; A.Savin [CC-BY-SA-3.0-2.5-2.0-1.0], <a href=%22http://commons.wikimedia.org/wiki/File%3APM08-13_img02_Kloster_Lehnin.jpg%22 target=%22_blank%22>via Wikimedia Commons</a>
            </span>
            "
        >

Responsive? of course!

Cloister garden courtyard and St. Marien church (rear) of the Kloster Lehnin (Lehnin abbey, a German Brick Gothic era monastery near Brandenburg/Havel, in Landkreis Potsdam-Mittelmark, Brandenburg).<br>
            <span class=%22copy%22>
                © A.Savin [CC-BY-SA-3.0-2.5-2.0-1.0], <a href=%22http://commons.wikimedia.org/wiki/File%3APM08-13_img02_Kloster_Lehnin.jpg%22 target=%22_blank%22>via Wikimedia Commons</a>
            </span>


Go on, play with the browser window
 

The markup

The same as for the animated caption, just set the image width to 100%

You use it as is or place the image inside a responsive container so it will integrate nicely with your responsive framework

<img
        src="./images/PM08-13_img02_Kloster_Lehnin.jpg"
        width="100%"
        data-captioner-start-closed = "false"
        role="caption"
        data-captioner-type="animated"
        title="Cloister garden courtyard"
        alt="Cloister garden courtyard and St. Marien church (rear) of the Kloster Lehnin (Lehnin abbey, a German Brick Gothic era monastery near Brandenburg/Havel, in Landkreis Potsdam-Mittelmark, Brandenburg).<br>
        <span class=%22copy%22>
            &copy; A.Savin [CC-BY-SA-3.0-2.5-2.0-1.0], <a href=%22http://commons.wikimedia.org/wiki/File%3APM08-13_img02_Kloster_Lehnin.jpg%22 target=%22_blank%22>via Wikimedia Commons</a>
        </span>
        "
>