Akhid Leo Akhid Leo - 6 months ago 8
Javascript Question

jquery disable prev next button modal image

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

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

Comments