Soy principiante en PhP y estoy haciendo una galería de imágenes con PhP (para facilitar la construcción del div que contiene las imágenes y aplica los estilos).
Este es el código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Prueba de codigo</title>
</head>
<body class="bg-info">
<section class="container-fluid">
<div class="row justify-content-center">
<div class="col-12 text-center">
<h1 class="text-white mt-5">Galería de imágenes</h1>
</div>
</div>
<?php
$directorio = opendir("images"); //ruta actual
while ($archivo = readdir($directorio)) //obtenemos un archivo y luego otro sucesivamente
{
if (is_dir($archivo))//verificamos si es o no un directorio
{
//Aqui se hace algo si no es un directorio, opcional
}
else
{
//Aqui hacen lo que quieran con cada archivo
echo "<div class='row justify-content-center'>";
echo "<div class='col-xs-12 col-sm-12 col-md-8 col-lg-8 text-center'>";
echo "<div class='card-columns'>";
echo "<div class='card'>"; //card con imagen
echo "<a href='#' data-toggle='modal' data-target='#modal_img'>";
echo "<img src='images/$archivo' alt='$archivo' class='card-img-top' />";
echo "</a>"; //cierre link imagen
echo "</div>"; //cierre card
echo "<div class='modal fade' id='modal_img' tabindex='-1' role='dialog' aria-labelledby='exampleModalLabel' aria-hidden='true' style='z-index: 2000;'>"; //modal de imagen centrada
echo "<div class='modal-dialog modal-lg modal-dialog-centered' role='document'>";
echo "<img src='images/$archivo' alt='$archivo' class='img-fluid rounded' />";
echo "</div>"; //cierre modal dialog
echo "</div>"; //cierre modal fade
echo "</div>"; //cierre card columns
echo "</div>"; //cierre columna
echo "</div>"; //cierre row
}
}
?>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
El código en sí me funciona, pero se me presentan 2 problemas que no se solucionar:
1) Intento hacer que ocupen la estructura que le di con el bootstrap 4 pero no funciona, me quedan las imágenes una abajo de la otra, y quiero que se ordenen hacia los lados primero. Si uso ese modelo de galería solo como HTML me funciona sin problemas.
2) Al hacer click en el modal siempre me sale solo la primera imagen, y evidentemente me gustaría que mostrara la imagen a la que hago click, no tengo idea como hacer eso.
Estoy intentando que se vea así:
Nuevamente Gracias a toda la comunidad.