Question

Currently I have it setup like this.

<ul id="slide">
<li><img src=""><div class="info">TEST1</div></li>
<li><img src=""><div class="info">TEST2</div></li>
</ul>

But instead I want it like this.

<ul id="slide">
<li><img src=""></li>
<li><img src=""></li>
</ul>

<ul id="slideinfo">
<li><div class="info">TEST1</div></li>
<li><div class="info">TEST2</div></li>
</ul>

So on focus, show the first div if blur hides’ and then show the next one.
Here’s js. http://fredhq.com/projects/roundabout#/api

Answer 1

Add id’s to your slide info divs… like id=”info-1″ etc, so you know which caption to show

//roundabout update info
var currentChild = 0;


//on the start of the animation, all captions will be erased

    $("ul#slide").bind( 'animationStart', function() {

        $(".info").fadeOut('fast');
    });

//on the end of the animation, the caption corresponding to the slide will fade in

    $("ul#slide").bind( 'animationEnd', function() {

       currentChild = $("ul#slide").roundabout("getChildInFocus");


            $("#info-"+currentChild).stop().fadeIn('fast');
    });