user3459377 user3459377 - 16 days ago 7
jQuery Question

Slide images loaded from an array

I have a problem with sliding some images where the path is given from HTML and in JavaScript code is made a for, for all of these images.My problem is: how to display first image from array and by clicking on next button to switch for second, third and so on? NOW its shown only fourth image.

Here's my code and a fiddle:

http://jsfiddle.net/U2T63/

function clickNextHandler(e)
{
if(progress <= 3){
shuffle();
}
CheckAnswer();
pixie.src = "res/pixiDreapta.svg";
updateBubble(bubbles);
nextBtn.disabled = true;

if(progress == 4)
{
updateBubble(4);
$(Objects).off('click');
resetBtn.disabled = false;
}
svgItem.setAttribute("display", "none");
};

Answer

I did a little tweek on your code, it should help you:

var imgs = $('.eticheta');
imgs.hide();
$(imgs.get(0)).show();

$('.nextButton').on('click', function(){
    var visible = $('.eticheta:visible')
       , next = visible.next();

    visible.hide();

    if ($(next.get(0)).hasClass('eticheta') === false) {
        next = $('.eticheta:first');        
    }

    next.show();
});

http://jsfiddle.net/U2T63/1/

If instead of reset the image to the first one do you want to disable the button you should replace the code inside of the if statement to:

$('.nextButton').prop('disabled', true);