Desarrollo web Programación con PHP Maquetación con HTML, CSS y JavaScript SEO on site y WPO Estándares recomendados por W3C Accesibilidad web Redacción de contenidos multilingües Fotografía

Galería dinámica con Lightbox y PHP

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.

T F G+

Escribir un comentario

¡Gracias por dejarnos tus comentarios! — por favor intenta mantener tu opinión relacionada con la anotación, no usar insultos, agresiones, o faltas de respeto al autor y otros participantes de la discusión, en caso de no hacerlo tu comentario podría ser borrado.
A excepción de la página web, el resto de datos solicitados son necesarios para incluir comentarios. El email no será mostrado en los comentarios. Tampoco será usado por parte del administrador para enviarle ninguna información ni será vendido a terceros para ningún tipo de uso.
Código de seguridad
Refescar

Algunos derechos reservados ©

Esta web utiliza cookies de terceros. Si sigue navegando entiendo que está de acuerdo con su uso: Más información Cerrar