He generado las miniaturas y la ventana modal de la vista completa y hasta ahí todo funciona bien, pero necesito ayuda para generar los vínculos correctos para la imagen anterior y siguiente, les dejo el código y espero alguien encuentre una solución
Adicionalmente, en mi archivo, para cerrar la ventana modal he incluido un link a la miniarura de la imagen aunque lo ideal sería cerrar el modal con un data-dismiss="modal", pero por algun motivo no funciona.
Código :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no ">
<title>Galería</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<style>
.miniatura {
display:block;
padding:10px;
}
.miniatura .imagen_miniatura {
width:100%!important;
padding-bottom:66%;
display:flex;
justify-content:center;
}
/*------MODAL-------*/
.modal:target {
display:table !important;
position:fixed;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.95);
margin:auto;
}
.modal .imagen_contenedor {
display:table-cell;
vertical-align:middle;
width:100%;
height:100%;
margin:auto;
text-align:center;
}
.imagen_modal {
display:block;
height:100% !important;
width:100% !important;
}
.modal a {
color:#fff;
font-size:25px;
}
.control {
z-index:100;
}
.anterior {
position:fixed;
top:50%;
left:30px;
}
.siguiente {
position:fixed;
top:50%;
right:30px;
}
</style>
</head>
<body>
<div class="container">
<?php
$directory="../images/fotos/puno/";
$dirint = dir($directory);
while (($archivo = $dirint->read()) !== false)
{
if ( preg_match("/\b(\.jpg|\.JPG)\b/", $archivo)){
echo '
<div class="miniatura col-xs-12 col-sm-6 col-md-4 col-lg-2" id="'.$archivo.'">
<a href="#modal_'.$archivo.'" class="imagen_miniatura img-responsive img-thumbnail" style="background: url('.$directory."/".$archivo.') center; background-size:cover " title="'.$archivo.'"></a>
</div>
<div class="modal" id="modal_'.$archivo.'" aria-hidden="true">
<div class="imagen_contenedor">
<a class="control anterior" href="'.$archivo.'-1"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="imagen_modal cerrar" href="#'.$archivo.'" style="background: url('.$directory."/".$archivo.') center no-repeat; background-size:contain; "></a>
<a class="control siguiente" href="'.$archivo.'+1"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
'."\n";
}
}
$dirint->close();
?>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
