Image Figure Caption effects
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:
Directions
Step 1: Insert the below script into the <head> section of your page:
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:
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:
|
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> |
duration: secondsdefaults 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" />
