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.

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

You may also like

New Products Launch and Redesign of Simply Energy website

The team has been busy with the re-design of the Simply Energy (SE) website to accommodate the launch of a new range of electricity and gas offers available to the public on the 25th of May 2009. The redesign was initiated by the SE Marketing team and the campaign is aimed at driving more visitors to the site to ultimately result in more supply contracts for SE.

Keep Reading

Video for web – some common questions answered

We get approached regularly by customers looking to display videos on the web. For the purposes of this blog entry, I thought it might be handy to jot down a few common discussion points and the issues to be wary of when putting video on the web.

Keep Reading

Newsletter sign up

Every couple of months we send out an update on what's been happening around our office and the web. Sign up and see what you think. And of course, we never spam.