Estoy realizando un código que me permite navegar por diferentes carpetas, pasando variables a través del atributo data-var
con href
en la primera página y abriendo carpetas con archivos de imágenes en la otra página.
Estas imágenes se vuelven a traer en la primera página con ajax. Pero si utilizo el plugin colorbox las imágenes no se muestran, como si el directorio estuviese vacío, sin imágenes.
He revisado el código con el depurador de chrome, pero no encuentro errores.
Espero contar con su ayuda.
<!DOCTYPE HTML>
<html lang="">
<head>
<meta charset="UTF-8">
<title>pagina1</title>
</head>
<body>
<a class="gallery" href="pagina2.php" data-var="imagenes">
Portfolio
</a>
<a id="link" style="display:none"></a>
<div id="msg" style="display:none;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="../jquery.colorbox.js"></script>
<script>
$("#link").colorbox({
inline:true,
href: "#msg"
});
$('.gallery').click(function (event) {
const data = this.dataset;
const url = this.href;
event.preventDefault();
$.ajax({
type: 'POST',
url,
data,
success (data) {
$('#msg').html(data)
$('#link').click()
}
});
return false;
});
</script>
</body>
</html>
<!DOCTYPE HTML>
<html lang="">
<head>
<meta charset="UTF-8">
<title>pagina2</title>
</head>
<body>
<?php
$variable = $_POST['var'];
foreach(glob($variable . "/" . '*.jpg') as $image) {
echo '<img src="'.$image.'">';
}
?>
</body>
</html>