CODEWITHSUNDEEP
jquerynivo-slider
Claire
Claire

Reputation: 3773

How to get the src of next image to be loade din Nivo Slider

I want to be able to get the src of the next image due to be loaded. So I was thinking something like 

 $('#nivo_slider').nivoSlider({

      beforeChange: function(){

           //get src of next image
    }
};

I can get the current image source by doing the following:

var currentImageSrc=$('#nivo_slider').data("nivo:vars").currentImage.attr('src');       
var index=currentImageSrc.lastIndexOf("/")+1;        
var imageName= currentImageSrc.substr(index);

But I'm not sure how to get the next one to be loaded

My HTML is as follows:

<div id="nivo_slider>
   <img src="img1" />
   <img src="img2" />
   <img src="img3" />
   <img src="img4" />

</div>

Upvotes: 1

Views: 1763

Answers (1)

David Thomas
David Thomas

Reputation: 253318

Well, here's one way to do it (and, despite some time spent trying there didn't seem to be an obviously-easier way):

/* Nivo seems to add images in order to implement its effects,
   so we need to grab a reference to the original images, or, at least, their `src` */

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

$('#slider').nivoSlider({
    beforeChange: function() {
        var wrap = $('#slider'),
            // caching data because I'm accessing it twice:
            data = wrap.data('nivo:vars'),
            // the current src:
            current = data.currentImage.attr('src'),
            len = data.totalSlides,
            /* compares the current src against the srcs stored in the
               images variable, and returns the index at which it was
               found */
            arrayPos = $.inArray(current, images),
            nextSrc;

        if (arrayPos == (len - 1)) {
            /* if the array position of the src is equal to length-1
               (zero-based arrays in JS), then the next image to be
               shown will be the first in the array */
            nextSrc = images[0];
        }
        else {
            // otherwise get the next src from the next position in the array
            nextSrc = images[arrayPos + 1];
        }

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

JS Fiddle demo.

References:

Upvotes: 4

Related Questions