Click next: Add class Click prev: remove class

by Marius Jopen

HTML

<input type="text" name="TextBox" id="TextBox" value="0" />
<input type="Button" id='MinusButton' value="-" />
<input type="Button" id='AddButton' value="+" />

<hr>
<img id="img-1" class="image fade-h" src="https://b.thumbs.redditmedia.com/GR3V1-RH-aXC4RfKKDSvLlB_DG6rhOOoHXSayIkhoFg.jpg">
<img id="img-2" class="image fade-h" src="https://b.thumbs.redditmedia.com/GR3V1-RH-aXC4RfKKDSvLlB_DG6rhOOoHXSayIkhoFg.jpg">
<img id="img-3" class="image fade-h " src="https://b.thumbs.redditmedia.com/GR3V1-RH-aXC4RfKKDSvLlB_DG6rhOOoHXSayIkhoFg.jpg">
<img id="img-4" class="image fade-h pause" src="https://b.thumbs.redditmedia.com/GR3V1-RH-aXC4RfKKDSvLlB_DG6rhOOoHXSayIkhoFg.jpg">
<img id="img-5" class="image fade-h " src="https://b.thumbs.redditmedia.com/GR3V1-RH-aXC4RfKKDSvLlB_DG6rhOOoHXSayIkhoFg.jpg">
<img id="img-6" class="image fade-h pause" src="https://b.thumbs.redditmedia.com/GR3V1-RH-aXC4RfKKDSvLlB_DG6rhOOoHXSayIkhoFg.jpg">
<img id="img-7" class="image fade-h" src="https://b.thumbs.redditmedia.com/GR3V1-RH-aXC4RfKKDSvLlB_DG6rhOOoHXSayIkhoFg.jpg">
<img id="img-8" class="image fade-h" src="https://b.thumbs.redditmedia.com/GR3V1-RH-aXC4RfKKDSvLlB_DG6rhOOoHXSayIkhoFg.jpg">
<img id="img-9" class="image fade-h" src="https://b.thumbs.redditmedia.com/GR3V1-RH-aXC4RfKKDSvLlB_DG6rhOOoHXSayIkhoFg.jpg">
<img id="img-10" class="image fade-h" src="https://b.thumbs.redditmedia.com/GR3V1-RH-aXC4RfKKDSvLlB_DG6rhOOoHXSayIkhoFg.jpg">
<img id="img-11" class="image fade-h pause" src="https://b.thumbs.redditmedia.com/GR3V1-RH-aXC4RfKKDSvLlB_DG6rhOOoHXSayIkhoFg.jpg">
<img id="img-12" class="image fade-h" src="https://b.thumbs.redditmedia.com/GR3V1-RH-aXC4RfKKDSvLlB_DG6rhOOoHXSayIkhoFg.jpg">
<img id="img-13" class="image fade-h" src="https://b.thumbs.redditmedia.com/GR3V1-RH-aXC4RfKKDSvLlB_DG6rhOOoHXSayIkhoFg.jpg">

<p></p>

CSS

.add {
  opacity: 1 !important;
}

.fade-h {
  opacity: 0;
}

#MinusButton {
  width: 100px;
  height: 100px;
  background: yellow;
}

#AddButton {
  width: 100px;
  height: 100px;
  background: orange;
}

#TextBox {
}

JavaScript

$(document).ready(function() {

  $('#AddButton').click(function() {
    var counter = $('#TextBox').val();
    counter++;
    var counterminusminus = counter - 2;
    var counterminus = counter - 1;
    var counterplus = counter + 1;

    $('#TextBox').val(counter);

    $('#img-' + counter).addClass("add");
    $('#img-' + counterminus).removeClass("add");

    $('.pause').each(function(i, obj) {
      var pause = parseInt($(this).attr('id').replace(/[^\d]/g, ''), 10);

      if (counter == pause + 1) {
        $('#img-' + counterminus).addClass("add");
      }
      if (counter == pause + 2) {
        $('#img-' + counterminusminus).removeClass("add");
      }

    });

    if (counter == 0) {
      alert("FIRST IMAGE / Switch to prev project.");
    }

    var numItems = $('.image').length;

    if (counter == numItems) {
      alert("LAST IMAGE / Switch to next project.");
    }

  });




  $('#MinusButton').click(function() {
    var counter = $('#TextBox').val();
    counter--;
    var counterminus = counter - 1;
    var counterplus = counter + 1;

    $('#TextBox').val(counter);

    $('#img-' + counterplus).removeClass("add");
    $('#img-' + counter).addClass("add");

    $('.pause').each(function(i, obj) {
      var pause = parseInt($(this).attr('id').replace(/[^\d]/g, ''), 10);

      if (counter == pause + 1) {
        $('#img-' + counterminus).addClass("add");
      }
      if (counter == pause + 2) {
        $('#img-' + counterminusminus).removeClass("add");
      }

    });

    if (counter == 0) {   
      var lastItems = $('.image').length
      for(var i = 0; i < lastItems-1; i++) {
      $("#AddButton").trigger('click');
		}



    }

    var numItems = $('.image').length;

    if (counter == numItems) {
      alert("LAST IMAGE / Switch to next project.");
    }

  });

});


$("document").ready(function() {
  setTimeout(function() {
    $("#AddButton").trigger('click');
  }, 10);
});