Título: Galería de imágenes PHP y Css
Publicado por: gabrielbdmr en 20 Julio 2016, 02:15 am
Buen día a todos, quería ver si me pueden ayudar con el siguiente archivo. La idea es generar una galería de forma automatizada con las imágenes de una carpeta que contenga archivos jpg y cuyos nombres sean aleatorios. 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 miniatura de la imagen aunque lo ideal sería cerrar el modal con un data-dismiss="modal", pero por algún motivo no funciona. <!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/"; $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>
Título: Re: Galería de imágenes PHP y Css
Publicado por: Adrialmend en 22 Julio 2016, 13:36 pm
Tal como lo planteas hay que pensarlo mas. Una buena idea es renombrar las fotos de las carpetas a numericos, ejemplo: 1, 2, 3.
En el momento en el cual estás viendo una foto le asignas una variable, la siguiente será la que tengo +1 y la anterior, la que tengo - 1. Eso si, tienes que comprobar el numero de fotos para si estas en la ultima te vuelva al principio y viceversa.
Espero haberte ayudado con lo tuyo.
Un saludo.
|