Galería de fotos simple con PHP y maquetada con CSS
Este script de PHP, es recomendado para aquellas galerías las cuales necesitan ser realizadas de manera rápida y no sea necesaria la interacción con bases de datos… para ser mas especifico es para aquellas galerías que no requerirán modificaciones, inserciones y eliminaciones en su contenido (las fotos).
Lo que haremos es que PHP, lea el contenido de la carpeta donde están nuestras fotos pequeñas (las vistas previas) y las fotos grandes (que se mostraran al hacer click sobre las vistas previas)… PHP, mostrara todas las imágenes y las colocara automaticamente, sin que te preocupes de estar poniendolas una por una como se tendría que hacer con puro HTML.
Vale la pena aclarar que el CSS que utilizaremos para maquetar esta galería también es simple… empecemos:
- Creamos una carpeta llamada “galeria_fotos” y ahí ponemos las fotos grandes.
- Aun estando en la carpeta “galeria_fotos”, creamos otra carpeta llamada “mini_”.
- Colocamos las imágenes pequeñas dentro de “mini_”.
Ahora vamos a la raíz de nuestro servidor web y creamos nuestro archivo PHP (con el nombre que queramos):
Nuestro CSS (poner entre las etiquetas <head></head>):
<style>
#container{
width:850px;
margin:0px auto -15px auto;
}
#marcoFotos{
width:105px;
height:80px;
background-color:#eeeeee;
border-top:#cccccc 1px solid;
border-left:#cccccc 1px solid;
border-right:#666666 1px solid;
border-bottom:#666666 1px solid;
padding-top:5px;
padding-left:5px;
margin-left:5px;
margin-bottom:5px;
float:left;
}
</style>
El codigo PHP (poner entre las etiquetas <body></body>):
<div id="container">
<?
//-- ruta de nuestras fotos pequeñas
$laRutaMini="galeria_fotos/mini_/";
//-- extraemos la ruta para las fotos grandes
$laRutaGrande=explode("/",$laRutaMini);
//-- abrimos la carpeta mini_
$carpeta=opendir($laRutaMini);
//-- leemos el contenido
while($miFile=readdir($carpeta)){
if($miFile!="." && $miFile!=".." && (strpos($miFile,".jpg"))){
//-- mostramos las fotos
echo "<div id='marcoFotos'><a href='".$laRutaGrande[0].”/”.$miFile.”‘><img src=’”.$laRutaMini.$miFile.”‘ width=’100′ height=’75′ border=’0′ /></a></div>”;
}
}
?>
</div>
Eso es todo, como veran no es nada dificil… si lo deseas, despues podes subir más fotos a las carpetas indicadas anteriormente, y nuestro script las mostrara sin necesidad de modificarlo.
Filed under: HTML - CSS, PHP on Agosto 1st, 2008 | No Comments »
…pasamos buenos momentos…. veamos como se hace en AS3.
