Open next modal on keyboard arrow buttons click

Question

I have created an modals system with jQuery.

//Open modal
$('.job_inside').on('click', function(){
    var id = $(this).data('id');
    $('#'+id).fadeIn(300);
});

//Close modal
$(".close_btn").click(function() {
    $(".job_full").fadeOut(300);
});

html:

<!-- Open modal -->
<div class="job">
    <div class="job_inside" data-id="job1"></div>
</div>

<!-- Modal -->
<div class="job_full" id="job1" style="display: none;">
    <div class="job_full_inside">
        <div class="close_btn">&times;</div>
        <img src="resursai/img/sanfierro.jpg" alt="" />
        <h2>SanFierro dizainas</h2>
    </div>
</div>

I want to make, that if modal id job1 is opened, on right arrow key click it closes job1 ant opens job2, and on left arrow click backs to job1. Is it possible, and how I can make it?

Sorry for grammar.

Answer 1

You could do it like this :

HTML:

<div class="job">
    <div class="job_inside" data-id="1">open</div> //notice change here data-id="job1" to "1"
</div>
<!-- Modal -->
<div class="job_full" id="job1" style="display: none;">
    <div class="job_full_inside">
        <div class="close_btn">&times;</div>
        <h2>First</h2>
    </div>
</div>
<div class="job_full" id="job2" style="display: none;">
    <div class="job_full_inside">
        <div class="close_btn">&times;</div>
        <h2>Second</h2>
    </div>
</div>
<div class="job_full" id="job3" style="display: none;">
    <div class="job_full_inside">
        <div class="close_btn">&times;</div>
        <h2>Third</h2>
    </div>
</div>

JS :

var currentId = null;

$(".job_inside").on("click", function () {
    var id = $(this).data("id");
    currentId = id;
    $("#job" + id).fadeIn(300);      //small change here
});

$(document).on("keyup", function (e) {
    if (e.which === 37 && currentId > 1) {
        currentId--;
        $(".job_full").fadeOut(300);
        $("#job" + currentId).fadeIn(300);
    } else if (e.which === 39 && currentId < 3) {
        currentId++;
        $(".job_full").fadeOut(300);
        $("#job" + currentId).fadeIn(300);
    }
});

Answer 2

This the basic strategy you want to deploy(Live Preview http://codepen.io/larryjoelane/pen/YwJMPG?editors=1010). You really don't need to worry about the fading in and out the element with the right id if you use the class name you have already provided with JQuery's eq function and an index variable that you will have to increment when you press the left and right arrows. You will want to use the which property on the keyup event to capture the keycode of the arrows. Here are some links to the API if want to learn more about them.

Keyup Event(scroll down to see the event.which example): http://api.jquery.com/keyup/

HTML:

    <!-- Open modal -->
<div class="job">
  <div class="job_inside" data-id="job1">Click to load</div>
</div>

<!-- Modal 1-->
<div class="job_full" id="job1" style="display: none;">
  <div class="job_full_inside">
    <div class="close_btn">&times;</div>
    <img src="resursai/img/sanfierro.jpg" alt="" />
    <h2>SanFierro dizainas</h2>
  </div>
</div>

<!--Modal 2-->
<div class="job_full" id="job2" style="display: none;">
  <div class="job_full_inside">
    <div class="close_btn">&times;</div>
    <img src="resursai/img/sanfierro.jpg" alt="" />
    <h2>United States</h2>
  </div>
</div>

   <!--Modal 3-->
<div class="job_full" id="job3" style="display: none;">
  <div class="job_full_inside">
    <div class="close_btn">&times;</div>
    <img src="resursai/img/sanfierro.jpg" alt="" />
    <h2>Canada</h2>
  </div>
</div>

JavaScript/JQuery:

(function($) {

  //store the index of the job
  var index = 0;

  //Open modal
  $('.job_inside').on('click', function() {

    $("#job1").fadeIn(300);

  });

  $(document).on("keyup", function(e) {

    console.log(e.which);

    switch (e.which) {

      //left arrow
      case 37:

        console.log("left arrow");

        //if the index is not 0
        if (index !== 0) {

          //decrement it
          index--;

        }

        //close the next job
        $(".job_full").eq(index + 1).fadeOut(200);

        //load the previous job
        $(".job_full").eq(index).fadeIn(300);

        break;

        //right arrow
      case 39:

        console.log("right arrow");


        //if the index incremented by 1 is less than the length of
        //collection
        if ((index + 1) < $(".job_full").length) {

        //increment the index
        index++;          

        }

          //close the previous job
          $(".job_full").eq(index - 1).fadeOut(200);

          //load the next job
          $(".job_full").eq(index).fadeIn(300);



        break;

    }

  });

  //Close modal
  $(".close_btn").click(function() {
    $(".job_full").fadeOut(300);
  });

})(jQuery);