jQuery image captions

After seeing the work Adrian has done with jQuery over the past year or so, I figured it was time I started to get my head around it.

I wanted a way that the client could easily add image captions to the images they insert in their website without having to copy and paste a large amount of code just to get the effect required.

You can download the code here.

Of course, it could be neatened up a little, so feel free to grab the code and play with it as you like and post any revisions in the comments.

The jQuery function

This is the jQuery function that creates the required div’s and span’s to create the HTML output.

jQuery.fn.captions = function(value){
this.wrap("<div class='figure' style='width:"+this.attr("width");+"px;'></div>");
this.after("<span>"+this.attr("alt");+"</span>");
};

The breakdown

The following code creats a div around the image and sets the width if the image to the div so that when you float the div through CSS it floats correctly.

this.wrap("<div class='figure' style='width:"+this.attr("width");+"px;'></div>");

The following code then places a span after the image tag and inserts the value of the alt tag of the image.

this.after("<span>"+this.attr("alt");+"</span>");

The output

The following is an example of what is outputted.

<div class="figure">
<img class="figure" width="400" height="200" alt="Image caption" title="Image title" src="image.jpg"/>
<span>Image caption</span>
</div>

Using the plugin

To use the plugin, download the script and insert the following into the head area of your HTML document

<script type="text/javascript" src="jquery.captions.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("img.captions").captions();
});
</script>

Then for the images you want to add captions too, just include the following class in your image.

class="captions"

Your image tag should look something like this

<img src="test.jpg" width="400" height="200" title="Batman logo" alt="Lorem ipsum dolor sit amet, consectetur adipisicing elit." class="captions" />

Dependencies

The plugin has been tested only with version 1.3 of jQuery.

Download the plugin

Download Captions v1.

Related posts:

1. “Capitalise” jquery extension
2. ASP.NET selectors in jquery
3. ASP.NET Button – prevent double clicks part 2
4. Degrading Script Tags
5. Developing faster web forms in .NET

Tags: jquery