Hover Caption (HCaption.js)

Markup example

This example uses all default settings.
1
2
3
4
5
6
7
8
9
10
11
12
<a href="#myToggle" class="panel">
  <img src="http://placehold.it/470x300/f1f1f1/aaa&text=Example" />
</a>
<div id="myToggle" class="cap-overlay hide">
  <h5>Cupcakes</h5>
  <div class="content">
    Name: cupcakes.png<br />
    Photography: Ryun Shofner<br />
    <a href="javascript:void(0)" class="button small"><i class="icon-edit"></i> Edit</a>
    <a href="javascript:void(0)" class="button small"><i class="icon-remove"></i> Delete</a>
  </div>
</div>
Cupcakes
Name: cupcakes.png
Photography: Ryun Shofner
Edit Delete

Fade Effect

This example demonstrates the fade effect setting.
Config
1
2
3
$(selector).hcaptions({
  effect: "fade"
});
Magic Attributes
1
cap-effect="fade"

Slide direction: left

This example demonstrates the slide effect.
Config
1
2
3
4
$(selector).hcaptions({
  effect: "slide",
  direction: "left"
});
Magic Attributes
1
2
cap-effect="slide"
cap-direction="left"
Cupcakes
Name: cupcakes.png
Photography: Ryun Shofner
Edit Delete

Slide direction: right

This example demonstrates the slide effect.
Config
1
2
3
4
$(selector).hcaptions({
  effect: "slide",
  direction: "right"
});
Magic Attributes
1
2
cap-effect="slide"
cap-direction="right"

Slide direction: top

This example demonstrates the slide effect.
Config
1
2
3
4
$(selector).hcaptions({
  effect: "slide",
  direction: "top"
});
Magic Attributes
1
2
cap-effect="slide"
cap-direction="top"

Slide direction: bottom

This example demonstrates the slide effect.
Config
1
2
3
4
$(selector).hcaptions({
  effect: "slide",
  direction: "bottom"
});
Magic Attributes
1
2
cap-effect="slide"
cap-direction="bottom"

Slide speed: 1000

This example demonstrates the animation speed.
Config
1
2
3
4
$(selector).hcaptions({
  effect: "slide",
  speed: "1000"
});
Magic Attributes
1
2
cap-effect="slide"
cap-speed="1000"

Slide speed: 100

This example demonstrates the animation speed.
Config
1
2
3
4
$(selector).hcaptions({
  effect: "slide",
  speed: "100"
});
Magic Attributes
1
2
cap-effect="slide"
cap-speed="100"

Configuration

Most settings can be set with the plugin or with "magic attributes" you can override the settings for individual captions. A magic attribute is a attribute prepended with cap- for example to override the effect setting, you would use cap-effect="fade" as a html attribute in your tags.
Name Type Description Default
data_selector string Selector for caption content .cap-overlay
width integer Overlay width full width
height integer Overlay height full height
overlay_x string Horizontal position for the overlay [center, left, right] center
overlay_y string Vertical position for the overlay [center, top, bottom] center
overlay_bg string Background css for overlay inherits
overlay_opacity integer Opacity of overlay 1
effect string Effect for overlay [fade, slide, show/hide] slide
speed integer Animation speed in ms 400
direction string Direction of overlay [top, bottom, right, left] top
zindex integer Base Z-Index 2
onshow function Callback fired when caption is shown none
onhide function Callback fired when caption is hidden none

© 2013 HumboldtWeb.com, Inc. All rights reserved.