Tengo un documento que debiera abrir un modal como slideshow con Ajax. Esta todo en orden. Tengo la página inicial, la página de consulta con una función glob, una plantilla css que se abre a través de una función addclass en Ajax y el script para mover las imágenes, pero no aparece la ventana modal. ¿Por qué no está funcionando, alguien me podría ayudar?
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('.imagen').remove();
$.each (imgs, function(i,val) {
$(".container").append('<div class="imagen numero' + i + '"></div>');
$('.imagen.numero' + 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/gA0.jpg" height=100>
</a>
<a class="gallery" href="page2.php" data-var="dir/1/">
<img src="dir/thumb/gA1.jpg" height=100>
</a>
<a class="gallery" href="page2.php" data-var="dir/2/">
<img src="dir/thumb/gA2.jpg" height=100>
</a>
</div>
<!--SLIDESHOW-->
<div id="myModal" class="modal">
<div class="modal-content">
<!--slides image-->
<div class="mySlides fade">
<div class="container"></div>
</div>
<!--botones navegación prev & next-->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<!--botón cerrar slideshow-->
<span class="close cursor" onclick="closeModal()">×</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("imagen");
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";
}