Get new jQuery plugins just once a week

×

Captioner-Js

FavoriteLoadingAdd to favorites

November 18, 2014

Beautiful and semantically correct captions for your images

Captioner-Js is a jQuery plugin to create beautiful and semantically correct captions for your images.

Created by Nuno Costa

Download

Example

captioner-js jQuery plugin

figcation

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:

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

Captioner-Js

Related posts:

Elastiside
GalleryView
Duotone
captioner-js jQuery plugin

http://jquer.in/wp-content/uploads/2014/11/captioner-js.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever