Download
User Rating: 3.4/5 ( 1 votes)
Caption.js is a jQuery plugin that allows you easily and semantically add captions to images on your websites.
There are a lot of jQuery-based solutions for putting captions on your page. What sets caption.js apart from the rest is that, instead of wrapping your images layers deep in divs, it adds captions using semantic markup (i.e., figure and figcaption tags).
Using semantic markup not only helps organize your code, it aids in accessibility for people using assistive devices to view websites and helps in SEO by feeding search engines meaningful, structured code.
Source: captionjs.com
1. INCLUDE CSS AND JS FILES
<link href="captionjs.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.caption.js" type="text/javascript"></script>
2. HTML
<img src="photo.jpg" data-caption="A wonderful caption for the photo."/>
Whatever text you have in an image's data-caption attribute will be the text for the caption.js caption. If no data-caption is set, caption.js will look for text in the image's alt text as a fallback.
3. JAVASCRIPT
$(window).load(function() {
$('img.caption').captionjs();
});
4. OPTIONS
$(window).load(function() {
$('img.caption').captionjs({
'class_name' : 'captionjs', // Class name assigned to each <figure>
'schema' : true, // Use schema.org markup (i.e., itemtype, itemprop)
'mode' : 'default', // default | static | animated | hide
'debug_mode' : false, // Output debug info to the JS console
'force_dimensions': false, // Force the dimensions in case they can't 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!
});
});
Since you’ll probably like to customize the <figure> elements that caption.js generates, you can set a custom class for them (or just use the default captionjs class). caption.js also features four different modes, which are shown in the examples below. For diagnosing problems, a debug mode is available. If you have images which are initially hidden when the page is loaded, set the 'force_dimensions' option to true so that caption.js can correctly detect the size of your images. Finally, if you have a responsive site, enable is_responsive to ensure the figure will enlarge and shrink with your layout — just be sure to wrap the original image in a responsive container.
JS Tutorial
