Backstretch copy output from loop to a DIV

Question

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.

http://jsfiddle.net/g84hK/7/

Thanks for any advice or help.

Answer 1

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/