NivoSlider - Get Next Picture Name

by mhctoledo

HTML

<script src="http://davidrhysthomas.co.uk/js/Nivo/nivo-slider3.0.1/nivo-slider/jquery.nivo.slider.js"></script>
<link rel="stylesheet" href="http://davidrhysthomas.co.uk/js/Nivo/nivo-slider3.0.1/nivo-slider/nivo-slider.css">
<div class="slider-wrapper theme-default">
    <div id="slider" class="nivoSlider">
        <img src="http://davidrhysthomas.co.uk/img/toystory.jpg" data-thumb="img/toystory.jpg" alt=""/>
        <a href="http://dev7studios.com"><img src="http://davidrhysthomas.co.uk/img/up.jpg" data-thumb="img/up.jpg" alt="" title="This is an example of a caption"/></a>
        <img src="http://davidrhysthomas.co.uk/img/walle.jpg" data-thumb="img/walle.jpg" alt="" data-transition="slideInLeft"/>
        <img src="http://davidrhysthomas.co.uk/img/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption"/>
    </div>
    <div id="htmlcaption" class="nivo-html-caption">
        <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
    </div>
</div>
<div id="output">
    <p>Next image's <code>src</code>: <code class="src"></code></p>.
</div>

CSS

code {
    color: #000;
    background-color: #ddd;
    padding: 0.1em 0.3em;
    font-family: mono;
    font-size: 0.9em;
}

.src {
    margin: 0.2em;
    display: block;
}

JavaScript

var images = $('#slider img').map(
    function() {
        return $(this).attr('src');
    });

$('#slider').nivoSlider({
    beforeChange: function() {
        var wrap = $('#slider'),
            data = wrap.data('nivo:vars'),
            current = data.currentImage.attr('src'),
            len = data.totalSlides,
            arrayPos = $.inArray(current, images),
            nextSrc;

        if (arrayPos == (len - 1)) {
            nextSrc = images[0];
        }
        else {
            nextSrc = images[arrayPos + 1];
        }

        $('#output code.src').text(nextSrc);
    }
});