Simple Animated Image Caption Plugin For jQuery

Image Caption is a simple jQuery plugin that loads image caption & source URL from data-* attributes and display them at the bottom right corner of the image when mouse hover. Used commonly for displaying copyrights tooltip on IMG tag.

See also:

• jQuery Plugin For Image Copyright Tooltip - imgrights

How to use it:

1. Include jQuery Image Caption plugin after jQuery library.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.imgcaption.js"></script>

2. Insert an image into the web page and use data-* attributes to set the image caption and the source URL.

<img alt="Alt" 
     src="1.jpg"
     data-caption="Image Caption"
     data-caption-align="center"
     data-source-url="http://www.google.com"
>

3. To enable the image hover caption just call the plugin on the image.

<script>
$(function(){
$('img').imgcaption();           
});
</script>

4. Set the default options.

<script>
$(function(){
$('img').imgcaption({
'backgroundColor': "#eee", 
'textColor':'#444', // // The text color of text caption.
'fontSize': '0.8rem', // The font size.
'fontStyle': 'italic' // font style default.
});           
});
</script>

Change log:

2018-01-31

• Support jQuery 3.2.1+
• added data-caption-align attribute to customize caption alignment

2014-05-30

• minor default settings adjustments

2014-05-29

• Fixed nav-bar fast-click buupdated to use figure/gigcaption tags to wrap img element

---

This awesome jQuery plugin is developed by karloespiritu. For more Advanced Usages, please check the demo page or visit the official website.