Animated jQuery Image Caption Overlay Effects Plugin - HCaptions

File Size: 416KB
Views Total: 4954
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Animated jQuery Image Caption Overlay Effects Plugin - HCaptions

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.