Estoy haciendo un código que me permita recorrer imágenes haciendo una petición Ajax. Es decir, veo una imagen a la vez vez, ya que recibo los datos como array y los voy mostrando uno por uno con la función each, agregando una clase por cada dato. Finalmente con javascript paso una imagen a la vez, viéndolas como slideshow. Hasta acá todo bien pero necesito actualizar el DOM, limpiándolo cada vez que realizo una petición Ajax. He intentado con el método .empty pero por alguna razón no me permite realizar el código. Agradecería cualquier ayuda.
page1.php
<!DOCTYPE HTML>
<html lang="">
<head>
<meta charset="UTF-8">
<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) {
var imgs = data.map(function(img) {
return '<img src="'+img+'" height=200px>';
});
$.each (imgs, function(i,val) {
$('.container').append('<div class="imagen numero' + i + '"></div>');
$('.imagen.numero' + i).html(val);
})
$.getScript("slides.js");
}
});
});
})
</script>
</head>
<body>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam felis mi, pellentesque at scelerisque eu, consectetur quis felis. Aliquam mollis</p>
</div>
<a class="gallery" href="page2.php" data-var="dir/1/">
GALERIA 1
</a><br>
<a class="gallery" href="page2.php" data-var="dir/2/">
GALERIA 2
</a>
<div class="container">
<a class="prev" onclick="passSlides(-1)">❮</a>
<a class="next" onclick="passSlides(1)">❯</a>
</div>
</body>
</html>
page2.php
<?php
header('Content-Type: application/json');
$directorio = $_POST['var'];
echo json_encode (glob($directorio . '*.jpg'));
?>
slides.js
var slideIndex = 1;
showSlides(slideIndex);
function passSlides(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";
}