Find file
Fetching contributors…
Cannot retrieve contributors at this time
59 lines (59 sloc) 2.88 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