Introduction

jQuery Footer Caption add a footer caption on an image, div box or other any DOM element. You can set some options for use a custom text too.

Using

You can download source Javascript file from this repository:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3")</script>
<!-- load latest version of jquery footer caption -->
<script type="text/javascript" src="http://undolibrary.googlecode.com/svn/trunk/jquery/jquery.footercaption/jquery.footercaption.js"></script>

When the DOM page is loaded, you can call footerCaption() method.

<script type="text/javascript">
google.setOnLoadCallback( 
    function() {
         $('img').footerCaption();
    }
);
</script>

Options

You can set some options like object param in the footerCaption() method.

  * @option		height		Caption height (default 32px)
  * @option		alpha		Caption alpha opacity (default 0.7)
  * @option		bgcolor		Caption background color (default #000)
  * @option		color		Caption font color (default #fff)
  * @option		font		Caption font family name (default Verdana)
  * @option		fontSize	Caption font size (default 10px)
  * @option		text		Custom text. If setting title and alt are ignored (default '')

Sample

$('div#provadiv').footerCaption({bgcolor: '#f90', color:'#222'});
$('img#myid').footerCaption({ bgcolor: '#eee', color: '#000', text: 'Custom caption <a href="#">click here</a>' });