Skip to content

HTTPS clone URL

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">
<head>
<meta charset="utf-8" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>jquery.captionate.js Example</title>
<style>
* {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;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="jquery.captionate.js"></script>
</head>
<body>
<p>
<a href="http://www.google.com">
<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="http://placehold.it/150x100" />
</a>
An example of paragraph text to the left of a small image. This image has a caption but no border.
</p>
<div class="clear"></div>
<p>
<img class="caption left border" src="http://placehold.it/350x150" 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>
<p>You don't have to use float but this shows you that it works.
</p>
<div class="clear"></div>
<p>
Here is an example that uses (and preserves) an inline style.
</p>
<p>
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="http://placehold.it/300x100" title="Injecting an inline style into the element" alt="A 300 x 100 pixel placeholder image" />
</p>
<div class="clear"></div>
<p>
Finally, here is an example of an image that isn't floated left or right:
</p>
<p>
<img class="caption border" src="http://placehold.it/150x50" title="This image is not floated" alt="A grey placeholder image" />
</p>
<script>
// wait until images have all loaded so we can properly get their width
$(window).load(function(){
$('img.caption').captionate();
});
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.