Automatic image caption from img title

I'm administering a Blogspot blog where some of the content uses img title tag to store image captions. Title tags are normally shown in a tooltip window, when user hovers the mouse over the image. There are some scripts around that display the image caption from image's title tag, but I decided to make my own. To get it quickly done, I used jQuery. This code goes before </head> tag, remove first line if you have jQuery already loaded.

Data provided by Pastebin.com - Download Raw - See Original

This is a test, be at your best (example caption)

Now you can use the following html markup on the page:

<img class="caption" title="Image title" src="./pics/pic.jpg" />

and it will dynamically be turned into something like this:

<div class="caption-wrap">
<img class="caption" title="Image title" src="./pics/pic.jpg" />
<p class="caption-text">Image title</p>
</div>

Use the classname "caption" and a title tag for those images you wish to autocaption.

Alignment and left/right margins are copied from img to the wrapping div, so horizontal positioning of the title paragraph is (should be) the same for basic image alignment options (centered or float left/right).

Here's a link to an example article with many auto-generated image captions, the blog is in Finnish, article is about prohibition: Nobel-palkitut ja huippupoliitikot vaativat huumeiden laillistamista.

Blogger post editor's "compose mode" has possibility to set image captions. But I think compose mode is not reliable, and so I mainly use the HTML editing mode. Also the HTML markup is much simpler using title tags and this script.

If you use this, you can adjust the script and the styles for your needs. This script can also be used outside Blogger.


Update January 21st 2013: Changed the script to use $(window).load() function instead of $(document).ready(), which makes sure that outerWidth function always returns the image width correctly. Line 31 was changed.