I have a full screen background slideshow powered by the Backstretch script. I'm trying to create a caption for each slide and would like to display the information in
<span class="cap"></span>
inside of
<div class="caption"></div>
The span is part of a list that populates the slideshow and is hidden.
Here is a jsfiddle of what I have so far.
Thanks for any advice or help.
You can use the backstretch.show
event as you suggest in you fiddle like a get the cap
element array.
Backstretch will fire a "backstretch.show" event everytime a new image loads, triggering a function that is passed the event and Backstetch instance. If you listen for that event, you can, for example, coordinate other changes to coincide with your slideshow.
Code:
// coordinating image captions with slides
$(b).on('backstretch.show', function() {
$(this).data("backstretch").index;
$(".caption").html(cap[$(this).data("backstretch").index].html());
});
Here is a working fiddle: http://jsfiddle.net/g84hK/9/