Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

59 lines (59 sloc) 2.95 kb
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<!--[if lt IE 9]>
<script src=""></script>
<title>jquery.captionate.js Example</title>
* {margin:0; padding: 0}
body {width: 600px; margin-left: auto; margin-right: auto; margin-top: 50px;}
figure {display: inline-block; margin-bottom: 20px; border: 1px solid transparent;}
figcaption {display: block; text-align: center; font-size: 0.8em; font-style: italic; }
p {margin-bottom: 1em;}
.left {margin-right: 15px; float: left;}
.right {margin-left: 15px; float: right;}
.border {border: 1px solid #555; padding: 3px;}
.clear {clear: both;}
<script src=""></script>
<script src="jquery.captionate.js"></script>
<a href="">
<img title="This is our exciting image caption!" alt="This is the ALT description, which is separate from the caption text" class="caption right" src="" />
An example of paragraph text to the left of a small image. This image has a caption but no border.
<div class="clear"></div>
<img class="caption left border" src="" title="This is my second image caption" alt="This is another alt description" />
An example of a longer paragraph of text to the right of a larger image. This image has a border as well as a caption.
<p>You don't have to use float but this shows you that it works.
<div class="clear"></div>
Here is an example that uses (and preserves) an inline style.
This is important for some CMS editors that inject inline styles into HTML rather than using classes to style the image.
<img class="caption" style="float:right;border: 4px solid #555; margin-left:10px;" src="" title="Injecting an inline style into the element" alt="A 300 x 100 pixel placeholder image" />
<div class="clear"></div>
Finally, here is an example of an image that isn't floated left or right:
<img class="caption border" src="" title="This image is not floated" alt="A grey placeholder image" />
// wait until images have all loaded so we can properly get their width
Jump to Line
Something went wrong with that request. Please try again.