jQuery Plugin For Animated Captions Over Images - Captall

Captall is a jQuery plugin that has the ability to create animated captions over any DOM element, not only images. The plugin comes with a lot of options making it customizable for your needs. The caption can be text or links or images or whatever you like.

See also:

• Animated jQuery Image Caption Overlay Effects Plugin - HCaptions
• Sticky Image Captions with jQuery
• Amazing Thumbnail Zoom Plugin With Sliding Captions
• Animated jQuery Image Caption On Hover Plugin - Capty
• jQuery Animated Image Cation with HTML5 Figcaption
• Animated Image Caption Hover Effects with CSS3 and HTML5
• Super Simple jQuery Caption Hover Over Effect - jQuery Caption

Basic Usage:

1. Load the latest version of jQuery javascript library and jQuery captall plugin at the bottom of the page

<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script src="jquery.captall.min.js"></script> 

2. Load the easing.js script for easing options.(optional)

<script src="easing.js"></script> 

3. Insert an image with caption text 'Hi I'm a caption' using image alt attribute. You can also set not only text but also images or links or whatever you like in plugin options.

<img id="demo" src="images/demo.jpg" alt="Hi I'm a caption" width="" height="" />

4. Call the plugin and you're done.

<script type="text/javascript">
$(document).ready(function() {
$('#demo').captall({
animation: 'slide'
});
});
</script>

5. All the options

<script type="text/javascript">
$(document).ready(function() {
$('#captall-animation1').captall({
animation: 'slide' // slide, fade or fixed
backgroundColor: '#fff', // background color of the caption
caption: 'I'm a caption', // the text, link, or image
delay: 0, // the delay time in milliseconds to show and hide the element, for fade and slide
delayShow: 0,
delayHide: 0, //fixed
slideFrom: 'top', 
slideTo: 'bottom',
cCaption: 'captall-caption', // 
cImage:'captall-image',
cWrapper: 'captall-wrapper',
top: '',
left: '',
width: '',
height: '', // full == 100%
opacity: .7,
time:'',
inTime:200,
outTime: 200,
padding: '',
paddingTop: 0,
paddingBottom: 0,
paddingLeft: 0,
paddingRight: 0,
fontColor: '#000',
fontsize: '16px',
textAlign: 'left',
fadeOutAfter:'',
easing: '', // easing options
easingIn: '', // easing options
easingOut: '' // easing options
});
});
</script>

---

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