Change title in span tag based on div name

Question

I have a bit of a problem I cant figure out.

I have a slideshow on my page using jquery.

<div id="carousel">
    <div id="round">
       <div class="box box-sec">
           <a href="#"><img class="carousel-image" alt="Image Caption" src="_includes/images/carousel/sample1.jpg"></a>
              <div class="carousel-caption">
                <p>
                  Peace of Mind  <span>at the best rate possible...</span>
                  <a href="#">Click here for more</a>
                </p>
              </div>
        </div>
       <div class="box box-easy">
            <a href="#"><img class="carousel-image" alt="Image Caption" src="_includes/images/carousel/sample1.jpg"></a>
              <div class="carousel-caption">
                <p>
                  Peace of Mind  <span>at the best rate possible...</span>
                  <a href="#">Click here for more</a>
                </p>
              </div>
        </div>
        <div class="box competitive">
            <a href="#"><img class="carousel-image" alt="Image Caption" src="_includes/images/carousel/sample1.jpg"></a>
              <div class="carousel-caption">
                <p>
                  Peace of Mind  <span>at the best rate possible...</span>
                  <a href="#">Click here for more</a>
                </p>
              </div>
        </div>
        <div class="box personal">
            <a href="#"><img class="carousel-image" alt="Image Caption" src="_includes/images/carousel/sample1.jpg"></a>
              <div class="carousel-caption">
                <p>
                  Peace of Mind  <span>at the best rate possible...</span>
                  <a href="#">Click here for more</a>
                </p>
              </div>
        </div>
        <div class="box business">
            <a href="#"><img class="carousel-image" alt="Image Caption" src="_includes/images/carousel/sample1.jpg"></a>
              <div class="carousel-caption">
                <p>
                  Peace of Mind  <span>at the best rate possible...</span>
                  <a href="#">Click here for more</a>
                </p>
              </div>
        </div>
        <div class="box affiliate">
            <a href="#"><img class="carousel-image" alt="Image Caption" src="_includes/images/carousel/sample1.jpg"></a>
              <div class="carousel-caption">
                <p>
                  Peace of Mind  <span>at the best rate possible...</span>
                  <a href="#">Click here for more</a>
                </p>
              </div>
        </div>
       <div class="arrows">
        <div class="next"><span>Test</span><img src="_includes/images/icons/rarr.png" /></div>
        <div class="prev"><span>Test</span><img src="_includes/images/icons/larr.png" /></div>
      </div>
      </div>
    </div>
    </div>

only 1 slide is active at a time, I want to somehow find the name of the next div, and write that into the "Test" span tags so that it shows up on hover and if clicked the span tag will then get the name of the next div and update itself, does this make sense? thanks

---

ADDED FIDDLE http://jsfiddle.net/TNRMk/

---

Ive tried this with no luck

$('.arrows').click(function() {
        $(".next span").html($('.roundabout-in-focus').next().attr('name'));
        $(".prev span").html($('.roundabout-in-focus').prev().attr('name'));
    });

Answer 1

Here is a good start for you:

$("div.arrows div").bind("mouseover", function() {
    $("div.arrows div.next").children("span").text($("div.roundabout-in-focus").next("div").attr("class"));
    $("div.arrows div.prev").children("span").text($("div.roundabout-in-focus").prev("div").attr("class"));
});

A number of points to be made:

1. This will not work for the prev arrow when the first item is selected.
2. I wasn't sure which part of the class name you wanted so you will need to do some modification
3. It needs to be on hover, or in the plugin itself as there are other ways to control the carousel. So setting on click won't work all the time.

Answer 2

The plugin provides callbacks btnNextCallback and btnPrevCallback that are executed after clicking the "next"/"prev" buttons are clicked.

The current focused item has the class .roundabout-in-focus.

I have made this jsfiddle for you to see (all you div have the same content so I've replaced it for the sake of the example).

---

Here's the (commented) code:

$(document).ready(function() {

    function updatePrevNextTitle() {

        // as this function is used as a callback for the plugin
        // 'this' is the roundabout wrapper div

        var $wrapper= $(this),

            // get the currently focused div
            $frontDiv = $wrapper.find('.roundabout-in-focus'),

            // get the next/prev div content relative to the focused div
            // also handle the circular roundabout by checking if 
            // .next() and .prev() return something, otherwise
            // get .first() and .last()
            nextContent = $frontDiv.next().length
                            ? $frontDiv.next().find('.carousel-caption').html()
                            : $frontDiv.first().find('.carousel-caption').html(),
            prevContent = $frontDiv.prev().length
                            ? $frontDiv.prev().find('.carousel-caption').html()
                            : $frontDiv.last().find('.carousel-caption').html();

        $wrapper.find('.next span').html(nextContent);
        $wrapper.find('.prev span').html(prevContent);
    };

    $('#round').roundabout({
        childSelector: 'div.box',
        btnNext: ".next",
        btnPrev: ".prev",
        // set the method updatePrevNextTitle as the callback handler
        btnNextCallback: updatePrevNextTitle,
        btnPrevCallback: updatePrevNextTitle
    }
    // set it also as the 'initialized' callback for the
    // initial setting of the prev/next span text
    ,updatePrevNextTitle);

});