0

I have a modal slideshow on my page and I would like it to close when pressing the 'esc' key and also change to the next image when using the right and left key. It would also be helpful if the modal closed when the user clicked on any part of the modal apart from the image.

Can someone help me please!!

Java: 

<script type="text/javascript">



function openModal() {

  document.getElementById('myModal').style.display = "block";

}


function closeModal() {

  document.getElementById('myModal').style.display = "none";

}




var slideIndex = 1;

showSlides(slideIndex);



function plusSlides(n) {

  showSlides(slideIndex += n);

}



function currentSlide(n) {

  showSlides(slideIndex = n);

}



function showSlides(n) {

  var i;

  var slides = document.getElementsByClassName("mySlides");

  var dots = document.getElementsByClassName("demo");

  var captionText = document.getElementById("caption");

  if (n > slides.length) {slideIndex = 1}

  if (n < 1) {slideIndex = slides.length}

  for (i = 0; i < slides.length; i++) {

      slides[i].style.display = "none";

  }

  for (i = 0; i < dots.length; i++) {

      dots[i].className = dots[i].className.replace(" active", "");

  }

  slides[slideIndex-1].style.display = "block";

  dots[slideIndex-1].className += " active";

  captionText.innerHTML = dots[slideIndex-1].alt;

}


</script>
.img{

    width: 85%;

 margin-top: 2%;
  }
  
  .img:hover{

cursor: pointer;

opacity: 0.9;

}

.img1{

    height: 100%;

 display: block;

 margin-left: auto;

 margin-right: auto;
  
  }
  
  .mySlides {

  display: none;

  height: 70%;

}
.prev, .next {

  cursor: pointer;

  position: relative;

  width: auto;

  padding: 0.7%;

  z-index: 2;

  color: white;

  font-weight: 200;

  font-size: 125%;

  transition: 0.6s ease;

  border-radius: 30% 0 0 30%;

  -webkit-user-select: none;

}
.demo{

 

  -ms-transform: scale(1.8, 1.8); /* IE 9 */

    -webkit-transform: scale(1.8, 1.8);

 height: 100%;

}

.demo:hover{

cursor: pointer;

opacity: 0.6;

}

.column{

 display: inline-block;

 overflow: hidden;

 margin-right: auto;

 margin-left: auto;

 width: 10.50%;

 height: 60%;

 

}

#slideshow{

 margin-right: auto;

 margin-left: auto;

 margin-top: 1%;

 width: 70%;

 height: 15%;

 text-align: center;

 display: block;

 margin-bottom: 5%;


}
<div id="content">

       
       <img class="img" src="london1.jpg" alt="London" onclick="openModal();currentSlide(1)"/>

      <p>Paradisum, 2016.</p>

      <img class="img" src="london2.jpg" alt="London" onclick="openModal();currentSlide(2)"/>

      <p>Ecclesia, 2016.</p>

      <img class="img" src="london3.jpg" alt="London" onclick="openModal();currentSlide(3)"/>



      <img class="img" src="london4.jpg" alt="London" onclick="openModal();currentSlide(4)"/>

    

      <img class="img" src="london5.jpg" alt="London" onclick="openModal();currentSlide(5)"/>

      <p>55 Broadway, 2016.</p>

      <img class="img" src="london6.jpg" alt="London" onclick="openModal();currentSlide(6)"/>

      <p>Kiosk, 2016.</p>


    

      

   <div id="myModal" class="modal">

  <span class="close cursor" onclick="closeModal()">&times;</span>

  <div class="modal-content">



       <div class="mySlides">

      <img class="img1" alt="London" src="london1.jpg"/>

    </div>

    <div class="mySlides">

      <img class="img1" alt="London"  src="london2.jpg"/>

    </div>

    <div class="mySlides">

      <img class="img1" alt="London" src="london3.jpg"/>

    </div>

    <div class="mySlides">

      <img class="img1" alt="London" src="london4.jpg"/>

    </div>

    <div class="mySlides">

      <img class="img1" alt="London" src="london5.jpg"/>

    </div>

    <div class="mySlides">

      <img class="img1" alt="London" src="london6.jpg"/>

    </div>



    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>

    <a class="next" onclick="plusSlides(1)">&#10095;</a>



    <div class="caption-container">

      <p id="caption"> CAPTION</p>

    </div>



<div id="slideshow">


    <div class="column">

      <img class="demo" src="london1.jpg" onclick="currentSlide(1)" alt="Paradisum, 2016"/>

    </div>

    <div class="column">

      <img class="demo" src="london2.jpg" onclick="currentSlide(2)" alt="Ecclesia, 2016"/>

    </div>

    <div class="column">

      <img class="demo" src="london3.jpg" onclick="currentSlide(3)"/>

    </div>

    <div class="column">

      <img class="demo" src="london4.jpg" onclick="currentSlide(4)"/>

    </div>

    <div class="column">

      <img class="demo" src="london5.jpg" onclick="currentSlide(5)" alt="55 Broadway, 2016"/>

    </div>

    <div class="column">

      <img class="demo" src="london6.jpg" onclick="currentSlide(6)" alt="Kiosk, 2016"/>

    </div>
</div>
</div>
</div>
</div>
WebMan111
  • 1

1 Answers1

0

You can use an eventListener on kayboard and get the keycode to set actions, like that :

document.addEventListener('keydown', function(e) {
    if(e.keyCode == 37) {
        //your code
    }
    //your code
});

You can see all keycodes here

Kall Drogo
  • 56
  • 7