Перейдите в лайтбокс, используя левую и правую клавиши со стрелками - PullRequest
Новая
       29

Перейдите в лайтбокс, используя левую и правую клавиши со стрелками

0 голосов
/ 07 марта 2019

Я могу перейти к предыдущему и следующему изображениям, нажимая на кнопки, но я не знаю, как включить его, используя клавиши со стрелками влево и вправо.

Мои изображения имеют этот код: 

                    <div class="hovereffect">
                    <img class="img-responsive" src="photography/photo7.jpg" alt="" onclick="openModal();currentSlide(1)">
                    <div class="overlay" onclick="openModal();currentSlide(1)">
                        <h6>Scary beautiful</h6>
                        <p class="info">Jan 5 2019</p>
                    </div>
                    </div>

И мой модал имеет этот код: 

<div class="my-slides">
                    <div class="numbertext">1/7</div>
                    <img src="photography/photo7.jpg" class="landscape-image">
                    <div class="modal-title">Scary beautiful</div>
                    <div class="modal-date">Jan 5 2019</div>
                </div>
<a class="prev" id="prev" onclick="changeSlides(-1)"><img src="images/left-arrow.svg" style="width:30px;"></a>
                <a class="next" onclick="changeSlides(+1)" onkeydown="changeSlides(+1)"><img src="images/right-arrow.svg" style="width:30px;"></a>

И это мой JavaScript: 

<script>

        function openModal(){
            document.getElementById('my-modal').style.display = "inline-flex";
            document.body.style.overflow = "hidden";
        }
        function closeModal() {
            document.getElementById('my-modal').style.display = "none";
        }

        var slideIndexJS = 1;
        showSlides(slideIndexJS);

        function changeSlides(n){
            showSlides(slideIndexJS += n)
        }
        function currentSlide(n){
            showSlides(slideIndexJS = n)
        }

        function showSlides(n){
            var i;
            var slidesJS = document.getElementsByClassName("my-slides");
            if (n > slidesJS.length) { slideIndexJS = 1;}
            if (n < 1) { slideIndexJS = slidesJS.length;}
            for (i = 0; i < slidesJS.length; i++){
                slidesJS[i].style.display = "none"
            }
            slidesJS[slideIndexJS - 1].style.display = "block";
        }

    </script>

Может кто-нибудь помочь мне добавить код javascript / jquery, который будет нажимать кнопку или вызывать функцию?

...