FF1+ IE8+ Opr9+

Image Figure Caption effects

Author: Dynamic Drive

Description: Images may tell a thousand words, but with a nice caption it can tell a few more. This script transforms any image (<img>) into a HTML5 compliant figure element with a nice caption. It also works on existing figure elements. Choose from 7 different effects to unveil the caption in style. Captions can be dynamically defined or literally inside the figure element. For captions that exceed the height of the image, scrollbars are added to make the hidden portion accessible.

IFCE uses the awesome Greensock animation library for buttery smooth animations and maximum browser compatibility. The script works in all modern browsers and mobile devices, down to IE8 and IE9 with some visual compromises. It also works on touch devices such as the iPad, where touching the image reveals the caption, and touching anywhere else dismisses it. Cool!

Demos:

An awesome picture
An awesome picture caption! A link
An awesome picture
An awesome picture caption! A link


Directions Developer's View

Step 1: Insert the below script into the <head> section of your page:

Select All

 The above accesses the following two external files. Download them below, and upload to your webpage directory:

Step 2: Add the following HTML markup to the <BODY> section of your page:

Select All

The image used in the demos can be downloaded here.

IFCE is built as a jQuery plugin, and as such, should be called in the following manner:

$(function(){ // on DOM load
 $('selector').addCaption({
  //comma separated options
 })

})

where 'selector' is a jQuery selector referencing the desired <img> or <figure> element you wish to apply a caption to. To reference a single element using its ID for example, the jQuery selector would be "#elementid", while ".classname" references all elements with a CSS class of "classname". The following shows the  two types of elements you can reference to add a figure caption to:

<img id="test" src="elephant.gif" />

<figure id="test2">
 <img src="elephant.gif" alt="An awesome picture">
 <figcaption>An awesome picture caption!</figcaption>
</figure>

As you can see, the element can either be a <img> element all by itself  (in which the script will transform to a full bodied <figure> element), or a <figure> element with all the components added manually already, namely, an <img> and <figcaption> element containing the desired caption text.

When calling $('selector').addCaption(), pass into it an "options" parameter

For the "options" parameter, the following comma-separated list of options are supported:

Option Description
fx: 'string'

defaults to "default"

The caption effect applied to the target images. The following 7 effect keywords are supported:
  • "default": Single veil slides down, then the caption from left to right.
  • "zoomin": Image zooms out while caption focuses into view.
  • "dualpanels": Two veils come together from top and bottom, respectively, then the caption.
  • "dualpanels2": Two veils come together from left and right, respectively, then the caption.
  • "pushup": Image gets pushed up slightly as caption slides into view from the bottom.
  • "flipopen": Image flips up to reveal the caption underneath it.
  • "flipreveal": Image rotates 180 degrees on the "x" axis while caption does the same to reveal the later.
caption: 'string|title'

defaults to null

The caption to display when the referenced element is an <img>. Enter either the desired caption to show, including rich HTML, or "title" if you wish the script to use the value of the <img>'s title attribute as the caption. The later works well when you wish to reference multiple images at once to add a caption to, instead of one at a time:

<script>

$(function(){ // on DOM load
 $('img.vacation').addCaption({
  caption: 'title'
 })
})

</script>

<img class="vacation" title="This caption will be shown!" />
<img class="vacation" title="This caption will be shown too!" />
<img class="vacation" title="This caption will be shown three!" />

duration: seconds

defaults to 0.5

The duration of the caption animation, in seconds. If an animation contains multiple "scenes", the duration value corresponding to each scene's runtime, so the total time may be greater than the value specified.

The following example adds a caption to a plain <img> element with a "dualpanels" effect and rich HTML caption:

<script>

$(function(){ // on DOM load
 $('#mushroom').addCaption({
  fx: 'dualpanels',
  caption: 'A mushroom (or toadstool) is the fleshy, spore-bearing fruiting body of a fungus, typically produced above ground on soil or on its food source. -<a href="http://en.wikipedia.org/wiki/Mushroom">Wikipedia</a>'
 })
})

</script>

<img id="mushroom" src="mushroom.jpg" />