Check out the demos
HoverUp is a flexible, yet very lightweight, jQuery Plugin to easily add animated captions to pictures or other content. I'll let the demos do the talking.
For starters, you include the required javascript files in the <head>
of your HTML document.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="path/to/your/jquery.easing.1.3.js"></script><!-- optional -->
<script type="text/javascript" src="path/to/your/jquery.metadata.js"></script><!-- optional -->
<script type="text/javascript" src="path/to/your/jquery.hoverup.pack.js"></script>
Note that in the snippet above, I am loading a Google hosted jQuery copy. You can host it yourself too.
Also, I am loading the jQuery Easing Plugin for additional easing effects. This file is optional.
If you want to make use of the Metadata Plugin be sure to load that one as well.
Finally, you load the HoverUp Plugin. Remember to change the src
path to match the location of the file on your server.
The HoverUp Plugin is very flexible. As you can see from the demos, it allows you the freedom to design your captions the way you want. Doing so, obviously requires some HTML and CSS skills; however, the HTML and CSS of the demos is fully included and ready to easily be “copied and pasted”.
There's one important rule to keep in mind. The content you want to apply HoverUp to should consist out of three basic elements, as shown in this example:
<a href="http://example.com/"><!-- 1. wrapping box -->
<img src="photo.jpg" /><!-- 2. content -->
<small>Photo caption</small><!-- 3. caption -->
</a>
<div>
, an anchor, or another block element.
Finally, all that is left to do, is to connect the HoverUp Plugin to the wrapping boxes.
Append the following piece of javascript to the <head>
of your HTML file.
Alternatively, you could move it to an external file.
<script type="text/javascript">
$(document).ready(function() {
$('.your_boxes').hoverup({
// Define any options here
});
});
</script>
Again, feel free to look at the source of the demos if you want to work from live examples. Have fun!
Options listed in alphabetical order
Option | Description |
---|---|
easingIn |
string · Default: 'swing' The easing function to use for showing the caption and shifting the content. |
easingOut |
string · Default: 'swing' The easing function to use for hiding the caption and reshifting the content. |
fade |
boolean · Default: true Whether to fade the caption in and and out while showing and hiding it. Note that you may want to set this option to false
if you're experiencing issues with semi-transparent PNGs in Internet Explorer
(more about this).
|
position |
string · Default: 'bottom' The position of the caption. Choose between 'top' and 'bottom' .
|
reverse |
boolean · Default: false Set reverse to true to initially show the caption,
and then hide it on hover.
|
shiftContent |
mixed · Default: false If you don't want to animate the content, just leave it set to false .
Two other options are available. Either you set it to the string 'push' which will make the caption push the content away,
or you set to an integer value which determines the number of pixels the content will be pushed (negative integers allowed).
|
speedIn |
integer · Default: 'fast' The duration (in milliseconds) for showing the caption and shifting the content. You can also use the predefined 'fast' , 'normal' and 'slow' strings.
|
speedOut |
integer · Default: 'normal' The duration (in milliseconds) for hiding the caption and reshifting the content. You can also use the predefined 'fast' , 'normal' and 'slow' strings.
|
You can easily change the default values for the options listed above. Just include the following javascript. This only needs to be called once. Of course, you can set all options to whatever you like.
$.fn.hoverup.defaults = {
fade: false,
position: 'top'
// Etcetera
}