-3

I am making a mini gallery where I can display my artworks. What I wanted to happen is that everytime I should click the "right" button image up until to the last photo, it will still repeat the images from the start. I tried the if statement but nothing happens. A little help will be much appreciated, thank you!

$(function(){

var currIndex;

//$("#header").hide();

$("ul li img").click(function() {

    currIndex = $(this).parent();

   var selectsrc = $(this).attr("src");
    $("#display").attr("src", selectsrc);

    $("#gray").slideDown();
    $("#white").fadeIn();
});

$("#gray").click(function(){
    $("#gray").slideToggle();
    $("#white").fadeOut();
});

$("#right").click(function(){

    var numOfItems = $("ul li img").length;

    var nextIndex = currIndex.next();
    var nextImg = nextIndex.children("img").attr("src");
    $("#display").attr("src", nextImg);
    currIndex = nextIndex;

    if (currIndex == numOfItems-1){
        alert("HELLO");
        currIndex = 0;
    }

    else {
        alert("HI");
        currIndex++;
    }


})



});
Naomi
  • 131
  • 1
  • 3
  • 13
  • `.next()`: _Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector._ It's not a number (index). – emerson.marini Jun 13 '16 at 15:31
  • `I tried the if statement but nothing happens` uhm. you have alerts in there, surely at least one of them happened, or an error reached your console. – Kevin B Jun 13 '16 at 15:31

1 Answers1

1

I didn't try your code, but it looks like in the right click function...

   if (currIndex == numOfItems-1){
    alert("HELLO");
    currIndex = 0;
   }
   else
   {
      alert("HI");
      currIndex++;
   }

should be...

   currIndex++;

   if (currIndex >= numOfItems){
    currIndex = 0;
   }

And your left click function should increment the currIndex, plus you need to initially set it to zero. :-)

Klock
  • 21
  • 4