hide next button when last element reaches

Question

I am creating a simple gallery with an overlay to display enlarged image when clicked.

In my gallery, every 3 images are grouped into a container as

<div class='overlay'>
  <a class='next control'>Next</a>
</div>
  <div class="container">
    <div class="image">
      <img src="http://dummyimage.com/100&text=Image1"/>
    </div>
    <div class="image">
      <img src="http://dummyimage.com/100&text=Image2" />
    </div>
    <div class="image">
      <img src="http://dummyimage.com/100&text=Image3"/>
    </div>
</div>
  <div class="container">
    <div class="image">
      <img src="http://dummyimage.com/100&text=Image4"/>
    </div>
    <div class="image">
      <img src="http://dummyimage.com/100&text=Image5" />
    </div>
    <div class="image">
      <img src="http://dummyimage.com/100&text=Image6"/>
    </div>
</div>

JQuery

$(document).ready(function () {
    var src;
    var currentElement;
    $(".image").click(function () {
        currentElement = $(this);
        src = $(currentElement).find("img").attr("src");
        $(".overlay").css("background-image", "url('" + src + "')");
        $(".overlay").show();
    });
    $(".next").click(function () {
        if ($(currentElement).next().length) {
            currentElement = currentElement.next();
            src = $(currentElement).find("img").attr("src");
        }
        else {
            currentElement = $(currentElement).parent().next().find(".image:first");
            src = $(currentElement).find("img").attr("src");
        }
        $(".overlay").css("background-image", "url('" + src + "')");
    });
});

I am able to get the next image on clicking next. But my problem is How to disable the next button when last image reaches ?.

I am unable to find a logic to get the last image.

Note: the images in last container may vary from 1 to 3

Here is the demo : https://jsfiddle.net/y5fwgz25/1/

Answer 1

here is my solution but i do not like this code, but works fine

<div class='overlay'>
  <a class='next'></a>
</div>
<div id="gallery">
<div class="container">
    <div class="image">
      <img src="http://dummyimage.com/100&text=Image1"/>
    </div>
    <div class="image">
      <img src="http://dummyimage.com/100&text=Image2" />
    </div>
    <div class="image">
      <img src="http://dummyimage.com/100&text=Image3"/>
    </div>
</div>
  <div class="container">
    <div class="image">
      <img src="http://dummyimage.com/100&text=Image4"/>
    </div>
    <div class="image">
      <img src="http://dummyimage.com/100&text=Image5" />
    </div>
    <div class="image">
      <img src="http://dummyimage.com/100&text=Image6"/>
    </div>
</div>

</div>


<script type="text/javascript">
$(document).ready(function () {
  var src;
  var currentElement;
  var last_img = $("#gallery .container:last-child .image:last-child");
  $(".image").click(function () {
    currentElement = $(this);
    src = $(currentElement).find("img").attr("src");
    $(".overlay").css("background-image", "url('" + src + "')");
    $(".overlay").show();

    if ( $(currentElement)[0] == $(last_img)[0] ) {
      $(".overlay .next").hide();
    }

  });


  $(".next").click(function () {

    if ( $(currentElement).next()[0] == $(last_img)[0] ) {
      $(".overlay .next").hide();
    }

    if ($(currentElement).next().length) {
      currentElement = currentElement.next();
      src = $(currentElement).find("img").attr("src");
    }else {
      currentElement = $(currentElement).parent().next().find(".image:first");
      src = $(currentElement).find("img").attr("src");
    }



    $(".overlay").css("background-image", "url('" + src + "')");
  });
});
</script>

Answer 2

You can add one if condition. If the length of currentElement is zero then hide .next.

Updated Fiddle-

$(document).ready(function () {
	var src;
	var currentElement;
	$(".image").click(function () {
		currentElement = $(this);
		src = $(currentElement).find("img").attr("src");
		$(".overlay").css("background-image", "url('" + src + "')");
		$(".overlay").show();
	});
	$(".next").click(function () {
		if ($(currentElement).next().length) {
			currentElement = currentElement.next();
			src = $(currentElement).find("img").attr("src");
		}
		else {
			currentElement = $(currentElement).parent().next().find(".image:first");
			src = $(currentElement).find("img").attr("src");
		}
    if($(currentElement).length==0) {
        $(".next").hide();
    }
		$(".overlay").css("background-image", "url('" + src + "')");
	});
});

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9) no-repeat;
    background-position: center;
}
.next {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 50%;
    background-image: url("http://dummyimage.com/50&text=Next");
    right: 8em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='overlay'>
  <a class='next'></a>
</div>
  <div class="container">
    <div class="image">
      <img src="http://dummyimage.com/100&text=Image1"/>
    </div>
    <div class="image">
      <img src="http://dummyimage.com/100&text=Image2" />
    </div>
    <div class="image">
      <img src="http://dummyimage.com/100&text=Image3"/>
    </div>
</div>
  <div class="container">
    <div class="image">
      <img src="http://dummyimage.com/100&text=Image4"/>
    </div>
    <div class="image">
      <img src="http://dummyimage.com/100&text=Image5" />
    </div>
    <div class="image">
      <img src="http://dummyimage.com/100&text=Image6"/>
    </div>
</div>

Answer 3

why don't you use jquery last method to get the last sibling and compare any of its attributes with the same attributes of the current element. If they are the same, hide or disable the next button.