Фотогалерея, модал, HTML и Bootstrap3 - PullRequest
Новая
       15

Фотогалерея, модал, HTML и Bootstrap3

0 голосов
/ 22 апреля 2019

У меня проблемы с созданием фотогалереи, в которой есть модальное всплывающее окно, при котором при нажатии на изображение появляется 6 отдельных изображений и содержится кнопка закрытия / x, чтобы закрыть всплывающее окно с изображением. У меня есть мой код ниже, где у меня есть 2 варианта (1 со скриптом и 1 без); тем не менее, я полностью теряюсь, когда использую скрипт для всех изображений, работает только первое, а во втором - ни одно не работает. Любая помощь ценится и спасибо! 

<section>
    <div class="container">
        <div class="row">
            <div class ="col-lg-12">
                <h2>Photo Gallery</h2>
            </div>   

            <div class="col-lg-3 col-md-4 col-sm-6">           
                <img id="myImg" src="imgs/1.jpg" alt="Rage, Flower Thrower" style="width:100%;max-width:300px">

                <div id="myModal" class="modal">
                    <span class="close">&times;</span>
                    <img class="modal-content" id="img01">
                    <div id="caption"></div>
                </div>

                <script>

                    var modal = document.getElementById('myModal');
                    var img = document.getElementById('myImg');
                    var modalImg = document.getElementById("img01");
                    var captionText = document.getElementById("caption");
                    img.onclick = function(){
                        modal.style.display = "block";
                        modalImg.src = this.src;
                        captionText.innerHTML = this.alt;
                    }

                    var span = document.getElementsByClassName("close")[0];

                    span.onclick = function() { 
                        modal.style.display = "none";
                    }
                </script>
            </div>

            <div class="col-lg-3 col-md-4 col-sm-6">
                <a href="imgs/2.jpg" class="modal">
                    <img src="imgs/2.jpg">
                </a>
            </div>
        </div>
    </div>
</section>
...