Animated Captions and Overlays

The caption2 plugin supplements the default caption plugin provided by Cycle2 and provides the capability of applying animations to a slideshow's caption and/or overlay. It is enabled by declaring the plugin by name on your slideshow element.

<div class="cycle-slideshow" 
    data-cycle-caption-plugin="caption2"
    ...

Examples

Defaults

The default options for the caption2 plugin are to fade in/out both the caption and overlay:

<div class="cycle-slideshow" 
    data-cycle-fx=scrollHorz
    data-cycle-caption-plugin=caption2
    >
    <div class="cycle-caption"></div>
    <div class="cycle-overlay"></div>

    <img src="<?= $imagePath ?>/images/p1.jpg" data-cycle-title="Spring" data-cycle-desc="Sonnenberg Gardens">
    <img src="<?= $imagePath ?>/images/p2.jpg" data-cycle-title="Redwoods" data-cycle-desc="Muir Woods National Monument">
    <img src="<?= $imagePath ?>/images/p3.jpg" data-cycle-title="Angel Island" data-cycle-desc="San Franscisco Bay">
    <img src="<?= $imagePath ?>/images/p4.jpg" data-cycle-title="Raquette Lake" data-cycle-desc="Adirondack State Park">
</div>

caption

overlay

Fade Overlay Content (not overlay container)

This example shows how to modify the above example to fade out the overlay contents rather than the entire overlay container. This is done by using the data-cycle-overlay-fx-sel option to target the elements to be animated.

<div class="cycle-slideshow" 
    data-cycle-fx=scrollHorz
    data-cycle-timeout=3000
    data-cycle-speed=700
    data-cycle-caption-plugin=caption2
    data-cycle-overlay-fx-sel=">div"
    >
    <div class="cycle-caption"></div>
    <div class="cycle-overlay"></div>

    <img src="<?= $imagePath ?>/images/p1.jpg" data-cycle-title="Spring" data-cycle-desc="Sonnenberg Gardens">
    <img src="<?= $imagePath ?>/images/p2.jpg" data-cycle-title="Redwoods" data-cycle-desc="Muir Woods National Monument">
    <img src="<?= $imagePath ?>/images/p3.jpg" data-cycle-title="Angel Island" data-cycle-desc="San Franscisco Bay">
    <img src="<?= $imagePath ?>/images/p4.jpg" data-cycle-title="Raquette Lake" data-cycle-desc="Adirondack State Park">
</div>

Slide Up/Down Caption

<div class="cycle-slideshow slider" 
    data-cycle-fx=scrollHorz
    data-cycle-timeout=3000
    data-cycle-caption-plugin=caption2
    data-cycle-caption-fx-out='slideUp'
    data-cycle-caption-fx-in='slideDown'
    >
    <div class="cycle-caption"></div>

    <img src="<?= $imagePath ?>/images/p1.jpg" data-cycle-title="Spring" data-cycle-desc="Sonnenberg Gardens">
    <img src="<?= $imagePath ?>/images/p2.jpg" data-cycle-title="Redwoods" data-cycle-desc="Muir Woods National Monument">
    <img src="<?= $imagePath ?>/images/p3.jpg" data-cycle-title="Angel Island" data-cycle-desc="San Franscisco Bay">
    <img src="<?= $imagePath ?>/images/p4.jpg" data-cycle-title="Raquette Lake" data-cycle-desc="Adirondack State Park">
</div>

Slide Up/Down Overlay

<div class="cycle-slideshow" 
    data-cycle-fx=scrollHorz
    data-cycle-timeout=3000
    data-cycle-caption-plugin=caption2
    data-cycle-overlay-fx-out="slideUp"
    data-cycle-overlay-fx-in="slideDown"
    >
    <div class="cycle-overlay"></div>

    <img src="<?= $imagePath ?>/images/p1.jpg" data-cycle-title="Spring" data-cycle-desc="Sonnenberg Gardens">
    <img src="<?= $imagePath ?>/images/p2.jpg" data-cycle-title="Redwoods" data-cycle-desc="Muir Woods National Monument">
    <img src="<?= $imagePath ?>/images/p3.jpg" data-cycle-title="Angel Island" data-cycle-desc="San Franscisco Bay">
    <img src="<?= $imagePath ?>/images/p4.jpg" data-cycle-title="Raquette Lake" data-cycle-desc="Adirondack State Park">
</div>

Caption2 Options

Options are set on the slideshow element using data-cycle-option-name attributes. Option attribute names are always lowercase and prefixed with data-cycle-. For example, to set the caption-plugin option you would use the data-cycle-caption-plugin attribute.

Name	Default Value	Description
caption-plugin	undefined	This must be set to "caption2" to enable this plugin.
caption-fx-out	"fadeOut"	animation out effect for caption
caption-fx-in	"fadeIn"	animation in effect for caption
caption-fx-sel	undefined	selector to identify the elements within the caption that should be animated. Leave undefined to animate the entire caption element.
overlay-fx-out	"fadeOut"	animation out effect for overlay
overlay-fx-in	"fadeIn"	animation in effect for overlay
overlay-fx-sel	undefined	selector to identify the elements within the overlay that should be animated. Leave undefined to animate the entire overlay element.