Galería de imágenes PHP y Css

gabrielbdmr · 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.

Código [Seleccionar]



<!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>

Adrialmend · 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.

Test Foro de elhacker.net SMF 2.1

Galería de imágenes PHP y Css

gabrielbdmr

Adrialmend