CODEWITHSUNDEEP
javascriptjqueryarrays
user3459377
user3459377

Reputation: 241

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");
};

Upvotes: 0

Views: 50

Answers (1)

Igor Escobar
Igor Escobar

Reputation: 1087

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);

Upvotes: 1

Related Questions