Модальная галерея изображений из Owl-Carousal image click PHP MySQL - PullRequest
Новая
       37

Модальная галерея изображений из Owl-Carousal image click PHP MySQL

0 голосов
/ 05 августа 2020

Я хочу создать всплывающее фото из уже работающей карусели совы. Это означает, что каждая фотография, на которую я нажимаю, должна всплывать и давать возможность перемещаться между всеми фотографиями, которые в настоящее время находятся в кулисах сов. Вот мой код так долго, что я думаю, это что-то с функцией currentSlide (1).

image

Это только части php, mysql и HTML. Вот сценарий JQuery для завершения слайдов и перехода между изображениями. 

<script>
        // Open the Modal
        function openModal() {
        document.getElementById("myModal").style.display = "block";
        }

        // Close the Modal
        function closeModal() {
        document.getElementById("myModal").style.display = "none";
        }

        var slideIndex = 1;
        showSlides(slideIndex);

        // Next/previous controls
        function plusSlides(n) {
        showSlides(slideIndex += n);
        }

        // Thumbnail image controls
        function currentSlide(n) {
        showSlides(slideIndex = n);
        }

        function showSlides(n) {
        var i;
        var slides = document.getElementsByClassName("mySlidespop");
        var dots = document.getElementsByClassName("demopop");
        var captionText = document.getElementById("captionpop");
        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>

Пожалуйста, помогите. Я чувствую, что упускаю что-то маленькое. Я получил код всплывающего модального окна от https://www.w3schools.com/howto/howto_js_lightbox.asp, чтобы получить дизайн и функциональность скрипта

...