elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Usando Git para manipular el directorio de trabajo, el índice y commits (segunda parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web
| | |-+  PHP (Moderador: #!drvy)
| | | |-+  Galería de imágenes PHP y Css
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Galería de imágenes PHP y Css  (Leído 2,529 veces)
gabrielbdmr

Desconectado Desconectado

Mensajes: 9


Ver Perfil
Galería de imágenes PHP y Css
« 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.

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/";
    $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>






En línea

Adrialmend

Desconectado Desconectado

Mensajes: 38


Ver Perfil
Re: Galería de imágenes PHP y Css
« Respuesta #1 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.


En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Galeria de imagenes
Diseño Gráfico
PhenfiX 8 4,422 Último mensaje 7 Noviembre 2004, 14:56 pm
por TaN€R
error en galeria de imagenes
PHP
chupin 5 2,478 Último mensaje 1 Septiembre 2007, 00:55 am
por chupin
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines