jquery disable prev next button modal image

Question

I need to change button css prev and next when is in first child and last child.

I was thinking about this code but not success :

 $(document).ready(function() { //begin open modal var $thisImage; $('.container img').click(function() { $thisImage = $(this); var src = $thisImage.attr('src'); $('.modal').css({ display: "block" }); $('.modal-content').attr("src", src); }); //begin navigate modal function navprev() { if ($thisImage.prev().is('img')) { var prev = $thisImage.prev().attr('src'); var first = $thisImage.first().attr('src'); $thisImage = $thisImage.prev(); $('.modal-content').attr("src", prev); if ($('.modal-content').attr("src", first)) { $('.prev').css("background", "red") } } } function navnext() { if ($thisImage.next().is('img')) { var next = $thisImage.next().attr('src'); $thisImage = $thisImage.next(); $('.modal-content').attr("src", next); } } //prev $('.prev').click(function() { navprev(); }); //next $('.next').click(function() { navnext(); }); $('.close').click(function() { $('.modal').css({ display: "none" }); }); }); 

 .container img { height: 250px; padding: 10px; width: 170px; object-fit: cover; } .modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.5); } .prev, .next { background: blue; } .modal-content { margin: auto; display: block; min-width: 300px; min-height: 500px; object-fit: cover; } /* The Close Button */ .close { position: absolute; top: 50px; right: 70px; color: #f1f1f1; font-size: 50px; font-weight: bold; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <img src="http://placekitten.com/200/300" alt="" /> <img src="http://placekitten.com/200/287" alt="" /> <img src="http://placekitten.com/200/285" alt="" /> <img src="http://placekitten.com/200/286" alt="" /> <!-- The Modal --> <div class="modal"> <button class="prev">Prev</button> <button class="next">Next</button> <br> <span class="close">×</span> <img src="" class="modal-content" alt=""> </div> </div> 

My goals are:

1. When i click prev until first element it will change css rule of button element, to add disable effect.
2. Same as prev , but it for next button

fiddle here

Answer 1

I fixed the previous button, I think you can do the next now ;)

$(document).ready(function() {
  //begin open modal
  var $thisImage;
  $('.container img').click(function() {
    $thisImage = $(this);
    var src = $thisImage.attr('src');
    $('.modal').css({
      display: "block"
    });
    if ($thisImage.prev().is('img')) {
      $('.prev').css("background", "blue");
    } else {
      $('.prev').css("background", "red");
    }

    $('.modal-content').attr("src", src);
  });
  //begin navigate modal
  function navprev() {
    console.log($thisImage.prev());

    var prev = $thisImage.prev().attr('src');
    var first = $thisImage.first().attr('src');
    $thisImage = $thisImage.prev();
    $('.modal-content').attr("src", prev);
    $('.prev').css("background", "blue");
    if ($thisImage.prev().is('img')) {
        $('.prev').css("background", "blue")
    } else {
      $('.prev').css("background", "red")
    }
  }

  function navnext() {
    if ($thisImage.next().is('img')) {
      var next = $thisImage.next().attr('src');
      $thisImage = $thisImage.next();
      $('.modal-content').attr("src", next);
    }
  }
  //prev
  $('.prev').click(function() {
    navprev();
  });
  //next    
  $('.next').click(function() {
    navnext();
  });
  $('.close').click(function() {
    $('.modal').css({
      display: "none"
    });
  });
});

https://jsfiddle.net/hc05jsqe/

Answer 2

You can use disabled attribute so you earn to points:

1. Button's style will change and will seen not clickable.
2. Button will not clickable.

Note: You can style the disabled button as you wish using button[disabled] selector in the css.

Now, to the code:

 $(document).ready(function() { //begin open modal var $thisImage; $('.container img').click(function() { $thisImage = $(this); var src = $thisImage.attr('src'); $('.modal').css({ display: "block" }); initButtons(); $('.modal-content').attr("src", src); }); //begin navigate modal function navprev() { console.log($thisImage.prev()); var prev = $thisImage.prev().attr('src'); var first = $thisImage.first().attr('src'); $thisImage = $thisImage.prev(); $('.modal-content').attr("src", prev); } function navnext() { if ($thisImage.next().is('img')) { var next = $thisImage.next().attr('src'); $thisImage = $thisImage.next(); $('.modal-content').attr("src", next); } } function initButtons() { $('.next').prop('disabled', !$thisImage.next().is('img')) $('.prev').prop('disabled', !$thisImage.prev().is('img')) } //prev $('.prev').click(function() { navprev(); initButtons(); }); //next $('.next').click(function() { navnext(); initButtons(); }); $('.close').click(function() { $('.modal').css({ display: "none" }); }); }); 

 .container img { height: 250px; padding: 10px; width: 170px; object-fit: cover; } .modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.5); } .modal-content { margin: auto; display: block; min-width: 300px; min-height: 500px; object-fit: cover; } /* The Close Button */ .close { position: absolute; top: 50px; right: 70px; color: #f1f1f1; font-size: 50px; font-weight: bold; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <img src="http://placekitten.com/200/300" alt="" /> <img src="http://placekitten.com/200/287" alt="" /> <img src="http://placekitten.com/200/285" alt="" /> <img src="http://placekitten.com/200/286" alt="" /> <!-- The Modal --> <div class="modal"> <button class="prev">Prev</button> <button class="next">Next</button> <br> <span class="close">×</span> <img src="" class="modal-content" alt=""> </div> </div> 

http://jsbin.com/bezujo/edit?html,css,js