Why can't I get a slideshow with ajax?

JavaScript
1

I’m trying to make a slideshow with an Ajax call. In my document I have two php pages, a classic css style sheet to get a slide image format and a JavaScript file to slide each image properly.
In my main page I do the Ajax request. I get images files from directory with glob function in page2.php. I get the modal format by adding a class through the click function that makes the modal appear. I finally use JavaScript to slide images.
Everything seems to be in place. If I check the console, all the elements have been added in my DOM tree properly but the slideshow doesn’t work.
What could I be doing wrong?

main.php

<!DOCTYPE HTML>
<html lang="">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
            $('.gallery').click(function (event) {
                event.preventDefault();
                var data = this.dataset;
            
            $.ajax({
                url: "page2.php",
                data: data,
                type: "POST",
                dataType: "json",
                success: function(data) {
                    $('.modal').addClass("show");
                    var imgs = data.map(function(img) {
                        return '<img src="'+img+'">';
                    });
                    $(".container").find('.file').remove();
                    $.each (imgs, function(i,val) {
                        $(".container").append('<div class="file index' + i + '"></div>');
                        $('.file .index' + i).html(val);
                    })
                    $.getScript("slides.js");
                } 
            });
        });
        })
    </script>  
    </head>
    
<body>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam felis mi, pellentesque at scelerisque eu, consectetur quis felis. Aliquam mollis</p>
    
    <div class="thumb-container">
        <a class="gallery" href="page2.php" data-var="dir/0/">
            <img src="dir/thumb/t0.jpg" height=100>
        </a> 
        <a class="gallery" href="page2.php" data-var="dir/1/">
            <img src="dir/thumb/t1.jpg" height=100>
        </a> 
        <a class="gallery" href="page2.php" data-var="dir/2/">
            <img src="dir/thumb/t2.jpg" height=100>
        </a> 
    </div>
    
    <!--SLIDESHOW-->
    <div id="myModal" class="modal">
        <div class="modal-content">
            <div class="mySlides fade">
                <div class="container"></div>
            </div>
            
            <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
            <a class="next" onclick="plusSlides(1)">&#10095;</a>
            
            <span class="close cursor" onclick="closeModal()">&times;</span>
        </div>
    </div>
    
</body>
</html>

page2.php

<?php
header('Content-Type: application/json');
$directorio = $_POST['var'];
echo json_encode (glob($directorio.'*.jpg'));
?>

style.css

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 10px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.75); /* Black w/ opacity */
    opacity: 0;
}

.modal.show {
	opacity:1;
	pointer-events: auto;
}

.modal-content {
    position: relative;
    margin: auto;
    height: 94.5vh;
    width: calc(94.5vh * 1.3);
    background-color:#fff;
    border-radius: 5px;
}

.modal-content img {
    margin: 0.33vh 0.3vh auto;
    height: 93.8vh;
    width: calc(94vh * 1.3);
    border-radius: 5px;
}

.close {
    color: white;
    position: absolute;
    top: 92.5vh;
    right: 0vw;
    font-size: 50px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #999;
    text-decoration: none;
    cursor: pointer;
}

.prev,
.next {
    display: block;
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
}

.next {
    right: 0; 
    border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

slides.js

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("file");
  if (n > slides.length) {
      slideIndex = 1
  }
  if (n < 1) {
      slideIndex = slides.length
  }
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  slides[slideIndex-1].style.display = "block";
}
2

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.