Vamos a crear una galería dinámica, muy útil para que el cliente solo se limite a subir las imágenes que más le gusten (por FTP) a un directorio determinado. Para ello vamos a utilizar la librería lightbox.
Lo primero es descargar las librerías necesarias para utilizar el lightbox, entre ellas se encuentran prototype.js y scriptaculous.js. Podeis descargarlo de la web de lightbox todos los archivos necesarios.
En la web explican claramente como utilizar las librerias. Consiste en linkear las librerias de javascript de la siguiente manera:
<script type="text/javascript" src="/blog/js/prototype.js"></script>
<script type="text/javascript" src="/blog/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/blog/js/lightbox.js"></script>
No podemos olvidarnos de la hoja de estilos CSS que acompaña a estas librerias y que da estilo al efecto.
<link rel="stylesheet" href="/blog/css/lightbox.css" type="text/css" media="screen" />
Ahora vamos a crear el archivo PHP para construir la galeria. En mi caso lo llamaremos galeria.php.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>GALERIA DINÁMICA</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript" src="/blog/js/prototype.js"></script>
<script type="text/javascript" src="/blog/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/blog/js/lightbox.js"></script>
<link rel="stylesheet" href="/blog/css/lightbox.css" type="text/css" media="screen" />
</head>
<body>
<h1>Galeria Dinámica</h1>
<div id="galeria">
<?php
//extensiones validas
$arr_ext=array("jpg","png","gif");
//directorio donde se encuentran
$mydir=opendir("path/galeria/");
//leer archivos
while($archivo=readdir($mydir))
{
$ext=substr($archivo,-3);
//si la extension del archivo es correcta muestra la imagen
if(in_array($ext,$arr_ext))
{
echo '<a href="/blog/path/galeria/'.$archivo.'" rel="lightbox[roadtrip]" title="Titulo de la imagen.'.$n.'"><img src="/blog/path/galeria/'.$archivo.'" alt="Descripcion imagen"/></a>';
}
}
?>
</div>
</body>
</html>
Como veis en el código he destacado la parte que recuperará la imágenes del directorio. El array solo recuperará imágenes con las extensiones jpg, png, gif. Atención a las mayúsculas y las minúsculas, ya que los servidores basados en Linux suele interpretarlas de forma diferentes.
Solo falta aplicar una hoja de estilos CSS al documento. quedando algo como en la demostración.
Hola, probe el codigo y me funciono perfecto, en la variable $n seria el nombre de la imagen no?
ResponderEliminarComo hago para tomar el nombre de la imagen?
Gracias, saludos
Juan Cruz
amigo el nombre de la imagen se guarda en la variable $archivo y me alegro q te haya servido el codigo
EliminarMuy buena la galeria, ahora, en el caso de tener mas de una Carpeta, como seria el codigo? Gracias
ResponderEliminar