Skip to content

Commit

Permalink
Completed modifications to script to use TITLE instead of ALT
Browse files Browse the repository at this point in the history 
adrienne noted that the script should use TITLE instead of ALT, so I
merged his pull request. However then I realized the example page
didn't always work because it needed to wait until all images have been
loaded before initiating the script. While I was at it I upgraded to
the newest version of jQuery and updated the readme file too.
  • Loading branch information
North Krimsly committed Jul 10, 2013
1 parent c08b19e commit 4122c14
Show file tree
Hide file tree
Showing 3 changed files with 33 additions and 31 deletions.
4 changes: 3 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,9 @@ jquery.captionate.js

I wanted to create image captions for my blog using HTML5, so I was excited to find out that HTML5 provides the new `<figure>` and `<figcaption>` elements. The HTML5 spec says that's exactly what these elements are intended for.

I wanted clients to be able to easily upload an image into their page using a content management system, then mark the image as "having a caption" using a CSS class. I realized I needed to write a JQuery script which would grab the "marked" image and automatically generate the code for `<figure>` and `<figcaption>` around the original image. The script would use the image's ALT attribute to supply the caption text.
I wanted clients to be able to easily upload an image into their page using a content management system, then mark the image as "having a caption" using a CSS class. I realized I needed to write a JQuery script which would grab the "marked" image and automatically generate the code for `<figure>` and `<figcaption>` around the original image.

I originally wrote the script to use the image's ALT attribute to supply the caption text. However, as adrienne noted the ALT tag should not be used for image captions. See the [W3C Spec](http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#alt). So I modified the script to use TITLE instead.

See example.html for an example of how to use the script. And, see [my blog article](http://www.highintegritydesign.com/blog/articles/image-captions-in-html5-using-figcaption-and-jquery) for a complete tutorial on how the script works.

Expand Down
33 changes: 17 additions & 16 deletions example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,43 +6,44 @@
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>jquery.captionate.js Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<style>
* {margin:0; padding: 0}
body {width: 600px; margin-left: auto; margin-right: auto; margin-top: 50px;}
figcaption {display: block; text-align: center; font-size: 0.8em; font-style: italic; padding: 5px 0;}
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: 0 15px 10px 0; float: left;}
.right {margin: 0 0 10px 15px; float: right;}
.border {border: 1px solid #555;}
.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>
<script>
$(document).ready(function(){
$('img.caption').captionate();
});
</script>
</head>
<body>
<p>
<a href="http://www.google.com">
<img alt="HTML5 image - this is an extremely long image caption I'm using" class="caption right" src="http://placehold.it/150x100" />
<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" alt="This is another placeholder image caption" />
<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>
<img class="caption border" src="http://placehold.it/200x200" alt="This image is not floated" />
<img class="caption border" src="http://placehold.it/200x200" title="This image is not floated" alt="A grey placeholder image" />
Finally, here is an example of an image that isn't floated left or right.
</p>
</body>
</html>
<script>
// wait until images have all loaded so we can properly get their width
$(window).load(function(){
$('img.caption').captionate();
});
</script>
</body>
</html>
27 changes: 13 additions & 14 deletions jquery.captionate.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,41 +20,40 @@
// http://www.highintegritydesign.com/blog/articles/image-captions-in-html5-using-figcaption-and-jquery
//
(function($) {
$.fn.captionate = function() {
return this.each(function() {
$.fn.captionate = function() {
return this.each(function() {

var $this = $(this), // save a reference to the current img.caption element
altText = $this.attr('title'), // grab the value of the image ALT attribute
imgWidth = $this.width(), // grab the width of the image
classList = $this.attr('class'); // save any classes attached to the <img>
var $this = $(this); // save a reference to the current img.caption element
var titleText = $this.attr('title'); // grab the value of the image TITLE attribute
var classList = $this.attr('class'); // save any classes attached to the <img>
var imgWidth = $this.width(); // grab the width of the image

$this.removeAttr('class'); // remove any classes from the original <img> element

// check and see if the image is contained in an immediate parent anchor link.
// if it is, construct a <figure> wrapping the anchor link instead of wrapping the <img>
// add the <figcaption> after the link, using the ALT element
// set the <figure> width to be the same as the <img>
// add the <figcaption> after the link, using the TITLE element
// add back in any classes from the original <img> to the new <figure>
// set the width of the <figure> to the width of the original image so captions will word-wrap
// finally move the new <figure> to be just before the paragraph it was contained in.
var $parentAnchorLink = $this.parent();
if ($parentAnchorLink.is('a')) {
$newFigure = $parentAnchorLink.wrap('<figure></figure>').parent();
$parentAnchorLink.after('<figcaption>' + altText + '</figcaption>');
$newFigure.width(imgWidth);
$parentAnchorLink.after('<figcaption>' + titleText + '</figcaption>');
$newFigure.addClass(classList);
$newFigure.width(imgWidth);
$newFigure.parent('p').before($newFigure);
}
// or else it's just an image tag, not wrapped with an anchor link.
// so do all the same as above except wrap the <img> instead of an anchor link
else {
$newFigure = $this.wrap('<figure></figure>').parent();
$this.after('<figcaption>' + altText + '</figcaption>');
$newFigure.width(imgWidth);
$this.after('<figcaption>' + titleText + '</figcaption>');
$newFigure.addClass(classList);
$newFigure.width(imgWidth);
$newFigure.parent('p').before($newFigure);
}
});
};
})(jQuery);



0 comments on commit 4122c14

Please sign in to comment.