Animated jQuery Image Caption Overlay Effects Plugin - HCaptions
File Size: | 416KB |
---|---|
Views Total: | 4961 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
HCaptions is a jQuery plugin that displays cool caption overlay effects when your mouse hovers over images or other selectors.
Features:
- Fade effect support
- Slide direction support
- Slide speed support
- Call back support
- Easy to use and setup
Basic Usage:
1. Include jQuery Library and HCaptions.js in the head section of your page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="jquery.hcaptions.js"></script>
2. Markup (Using Magic attribute, a attribute prepended with cap- ,
to override the settings for individual captions.
<a href="#myToggle" class="panel" cap-effect="fade"> <img src="demo.jpg" /> </a> <div id="myToggle" class="cap-overlay hide"> <h5>...</h5> <div class="content"> ... </div> </div>
3. Options.
data_selector: // Selector for caption content Default: .cap-overlay width: // Overlay width Default: full width height: // Overlay height full height overlay_x: // Horizontal position for the overlay [center, left, right] Default: center overlay_y: // Vertical position for the overlay [center, top, bottom] Default: center overlay_bg: // Background css for overlay Default: inherits overlay_opacity: // Opacity of overlay Default: 1 effect: // Effect for overlay [fade, slide, show/hide] Default: slide speed: // Animation speed in ms Default: 400 direction: // Direction of overlay [top, bottom, right, left] Default: top zindex: // Base Z-Index Default: 2 onshow: // Callback fired when caption is shown Default: none onhide: // Callback fired when caption is hidden Default: none
This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.