ReDsgn

I wrote a plugin for jQuery (a JavaScript library), to add a border and caption text to all images with a given class name. I’m a semantic junkie so, the code uses the all of the valid tag attributes in the “img” tag. alt = caption, border = border hspace = left and right margin, vspace = top and bottom margin, align = float position either left or right defaulted to the left blank leaves it inline.

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.