enough talk let’s see it.
This sample uses all defaults of the script the attributes set are border = 1, alt = “testing jQuery captions!”, hspace = 5, vspace = 5, align = left.

To override the defaults you can add in options into the function call.

Here is a list of all possible parameters.

• bgcolor
• fontcolor
• font
• fontsize
• margin
• align
• width
• border

My Image tag looks like this.

<img class="caption" src="http://www.redsgn.com/wp-content/uploads/2008/11/paul.jpg" border="1" alt="testing jQuery captions!" hspace="5" vspace="5" align="left" />


In order to rewrite the images tags I call the function on the ready state of the document so I place my call inside an onload block like this.

jQuery(document).ready(function(){
});


Inside the ready block I make my call.

jQuery('img.caption').addcaption();


This will effect all images on the current document that have a class of “caption”.

My final load script block.

jQuery(document).ready(function(){
jQuery('img.caption').addcaption();
});


The output of the script is semantic too.

<span style="border: 1px solid #000000; margin: 5px; padding: 0px; background-color: #ffffff; display: block; float: left; text-align: center; width: 137px; cursor: pointer;">
<img alt="testing jQuery captions!" src="http://www.redsgn.com/wp-content/uploads/2008/11/paul.jpg" class="caption" style="border: none ; margin: auto;"/>
<span style="padding: 2px; display: block; text-align: center; background-color: #ffffff; color: #333333; font-family: Arial,Helvetica,sans-serif; font-size: 10px; width: 133px;">testing jQuery captions!</span>
</span>


Download

Download jQuery image captions

Supported Browsers

Currently, the Image Caption script has been tested and confirmed on the following browsers:

• Internet Explorer 5.5+
• Mozilla Firefox 1.5+
• Apple Safari 2.0
• Opera Version 8.51

Licensing

This ReDsgn tool is licensed under the Creative Commons Attribution 3.0 license.