$title = 'Captions'; include '../inc/inc_intro_demo.php'; ?>
You can add a simple, default caption by including an empty div in your
slideshow container with the class cycle-caption
.
The default caption will display the current slide index and the
total slidecount for the slideshow.
<div class="cycle-slideshow"
data-cycle-fx=scrollHorz
data-cycle-timeout=2000
>
<!-- empty element for caption -->
<div class="cycle-caption"></div>
<img src="/images/p1.jpg">
<img src="/images/p2.jpg">
<img src="/images/p3.jpg">
<img src="/images/p4.jpg">
</div>
See demo-slideshow.css for the caption styles that are being applied in this demo.
Captions are created using the template string found in the
caption-template
option. The default value for that option
is '{{slideNum}} / {{slideCount}}'
as can be seen in the example above.
To override the default caption template and create custom captions simply declare a
data-cycle-caption-template
attribute and set it to your desired
template string. Template strings support a Mustache-style syntax by default. For example,
to create captions that are more verbose:
<div class="cycle-slideshow" data-cycle-fx=scrollHorz data-cycle-timeout=2000 data-cycle-caption="#custom-caption" data-cycle-caption-template="Slide {{slideNum}} of {{slideCount}}" > <img src="/images/p1.jpg"> <img src="/images/p2.jpg"> <img src="/images/p3.jpg"> <img src="/images/p4.jpg"> </div> <!-- empty element for caption --> <div id="custom-caption" class="center"></div>
Note also that in this example the caption container is outside the slideshow and is referenced
using the data-cycle-caption
option.
This example shows how to combine slideshow data with external metadata stored
on the slide element. Here our caption template references metadata stored on the element via a data-*
attribute. The data-cycle-title
attribute is not a standard
Cycle option, but it can be added to the slide in order to reference
it in our caption template via {{cycleTitle}}
(camelCase). We could have chosen
a different name for that attribute, for example data-title
and accessed it accordingly, {{title}}
.
<div class="cycle-slideshow" data-cycle-fx=scrollHorz data-cycle-timeout=2000 data-cycle-caption="#adv-custom-caption" data-cycle-caption-template="Slide {{slideNum}}: {{cycleTitle}}" > <img src="/images/p1.jpg" data-cycle-title="Spring" > <img src="/images/p2.jpg" data-cycle-title="Redwoods" > <img src="/images/p3.jpg" data-cycle-title="Angle Island" > <img src="/images/p4.jpg" data-cycle-title="Raquette Lake" > </div> <!-- empty element for caption --> <div id="adv-custom-caption" class="center"></div>
This example shows how to use an image's alt
attribute for the caption.
<div class="cycle-slideshow" data-cycle-fx=scrollHorz data-cycle-timeout=2000 data-cycle-caption="#alt-caption" data-cycle-caption-template="{{alt}}" > <img src="/images/p1.jpg" alt="Spring" > <img src="/images/p2.jpg" alt="Redwoods" > <img src="/images/p3.jpg" alt="Angle Island" > <img src="/images/p4.jpg" alt="Raquette Lake" > </div> <!-- empty element for caption --> <div id="alt-caption" class="center"></div>
For more options, check out the animated caption/overlay demos. include '../inc/inc_outro.php'; ?>