ImageCaption – a MooTools Plugin for Auto-Captioning Images

Aug 9 2009 by Jacob Gube | 3 Comments

ImageCaption - a MooTools Plugin for Auto-Captioning Images

ImageCaption is a MooTools 1.2+ plugin for easily adding figure captions to image elements on a web page. It is very customizable and painless to style.

This plugin follows (to the best of my abilities) standard MooTools coding style/format and documentation (see below, in the section More Information). This plugin is based on a MooTools tutorial I wrote a while back, called "How to Auto Caption Images Using MooTools".

Demonstration

You can click on the following image to see a live demonstration of ImageCaption.

ImageCaption - demo.

Download

Download the plugin as a zip file here.

Basic Implementation

  1. Download the MooTools core library.
  2. Download the ImageCaption plugin (it’s a ZIP file).
  3. Place the MooTools core library inside your working directory.
  4. Extract ImageCaption.js (it’s inside ImageCaption.zip) inside your working directory.

To caption all images in a web page, use the following example in your HTML document (be sure to modify the src attribute value as neccesary, to match the location and file name of your JavaScript libraries).

<head>
<script type="text/javascript" src="mootools-yui-compressed.js"></script>
<!-- ImageCaption -->
<script type="text/javascript" src="ImageCaption.js"></script>
<script type="text/javascript">
$(window).addEvent('domready', function(){
  // Basic implementation
  var basicCaption = new ImageCaption($$('img'));
});
</script>
</head>

More Information

Here are additional documentation for this plugin (following a similar format to MooTools Docs).

Class: ImageCaption

Automatically captions img elements with their alt (or title) property.

Syntax/Usage

var imagecaption = new ImageCaption(images[, options]);

Arguments

  1. images (array) – the images to be captioned.

Options

  • wrapperClass (string, defaults to: 'imageCaption') – the class of the wrapper element.
  • wrapperType (string, defaults to: 'span') – the element type of the wrapper element.
  • captionType (string, defaults to: 'span') – the element type of the caption element.
  • captionPosition (string, defaults to: 'after') – where to inject the caption element relative to the img element being captioned.

Examples

View the ImageCaption demo page to see basic implementation examples of the plugin.

License

This script is available free to the public with an MIT-style license.

Changelog

Related Content

3 Comments

kiran voleti

August 10th, 2009

Very useful Plugin…Thank you.

andrew

August 11th, 2009

thanks Jacob! a useful plugin that i can use it in my website!

Jacob Gube

August 11th, 2009

Hey @kiran voleti and @andrew I’m glad you both liked this MooTools plugin – it was very fun to write and I’m glad to be sharing it to the public.

Leave a Comment

Subscribe to the comments on this article.