Continuando con nuestra larga saga de tutoriales sobre diseño Web, en esta ocasión les traemos un pequeño desarrollo que sin duda puede ser de gran utilidad para nuestros sitios, en especial si queremos montar una especie de portafolio o una simple galería para desplegar imágenes.

En un esfuerzo conjunto e integración de tecnologías como PHP, jQuery, CSS, XHTML y un poco de MySQL, hoy veremos un paso a paso de como construir una simple galería de imágenes desde cero.

El detalle, como siempre, después del salto.

Cómo crear una galería de imágenes para tu Web

Como siempre, lo primero:

Detalles del tutorial

• Tiempo aproximado de implementación: 60 minutos.
• Dificultad: Intermedio.
• Conocimientos requeridos: Idealmente nociones de PHP, XHTML, CSS, jQuery y bases de datos, especialmente si quieren personalizar el diseño final. De cualquier forma, todo será explicado paso a paso en caso de que deseen implementar tal como está acá.

Implementos necesarios:

• Un servidor que pueda ejecutar archivos PHP. (Recomendamos XAMPP para Windows, Linux y Mac).
• Un sistema gestor de bases de datos MySQL (En XAMPP viene uno incluido).
• Opcionalmente un editor Web (Recomendamos Adobe Dreamweaver o Aptana Studio).
• Un editor de imágenes (Recomendamos Adobe Photoshop).
• La librería jQuery, que pueden obtener desde su sitio oficial.
• Imágenes para montar en la galería. Para este caso utilizamos algunas de la galería de JoesSistah, las cuales están bajo una licencia Creative Commons.

Con eso claro, vamos, manos a la obra:

1.- Lo primero que haremos será crear una base de datos en nuestro MySQL y en el una tabla llamada imagen, la cual contendrá 4 campos de información:

CREATE TABLE 'clh'.'imagen' (
'id' INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
'titulo' VARCHAR( 50 ) NOT NULL ,
'descripcion' TEXT NOT NULL ,
'archivo' VARCHAR( 20 ) NOT NULL
) ENGINE = InnoDB CHARACTER SET utf8 COLLATE utf8_unicode_ci

Repasando nuestro código anterior, lo que hemos hecho ha sido crear una tabla llamada imagen, la cual contiene 4 campos:

• id: Contendrá un número identificatorio para cada imagen, lo hemos dejado con auto increment para que cada vez que se inserte un nuevo registro aumente automáticamente.
• titulo: Contendrá el título de la imagen.
• descripcion: Contendrá la descripción de la imagen.
• archivo: Contendrá el nombre del archivo y su extensión para luego llamarlo desde nuestra galería.

2.- Luego que hemos creado la tabla, insertaremos información de 4 imágenes:

INSERT INTO imagen( titulo, descripcion, archivo ) VALUES (
'Paisaje Numero 1', 'Imagen representativa de un paisaje con costa',
'1.jpg')

INSERT INTO imagen( titulo, descripcion, archivo ) VALUES (
'Paisaje Numero 2', 'Imagen representativa de un paisaje con nieve',
'2.jpg')

INSERT INTO imagen( titulo, descripcion, archivo ) VALUES (
'Paisaje Numero 3', 'Imagen representativa de un paisaje con una
luna en el fondo', '3.jpg')

INSERT INTO imagen( titulo, descripcion, archivo ) VALUES (
'Imagen abstracta', 'Representacion de una mariposa',
'4.jpg')

3.- Con eso debiésemos tener una tabla de la siguiente forma:

[table id=2 /]

4.- Con nuestra tabla creada, y antes de empezar a codificar, haremos la preparación de nuestras imágenes. Para la galería, necesitaremos 3 tamaños de las mismas imágenes, 2 los fijaremos en imágenes distintas y 1 lo redimensionaremos vía CSS. Así que necesitaremos:

• Tamaño normal de las imágenes para la vista completa. En este caso utilizamos 400px.
• Tamaño reducido para los previews o thumbnails. En este caso utilizamos 150px.
• Tamaño aún más reducido para los previews bajo la vista completa. En este caso utilizamos 75px. Este es el que ajustaremos vía CSS.

Los 2 primeros pueden hacerlo mediante su editor de imágenes favorito.

5.- Con todo aquello listo, procedemos a codificar. Nuestra galería contará de 2 archivos en formato PHP, uno donde desplegaremos un preview de las imágenes y añadiremos un pequeño efecto en jQuery para que estas aparezcan oscuras al cargar la página y que solo sean completamente visibles cuando el usuario pase el mouse por encima, y el otro funcionará como un visor de la imagen en tamaño completo, con su respectiva información y enlaces para imágenes siguientes y anteriores, así como otro preview de la misma galería en un tamaño más pequeño. Adicionalmente codificaremos un archivo en formato CSS para el estilo de la galería y un archivo en formato JS para nuestras funciones en jQuery. Así que resumiendo, los archivos que crearemos son:

• index.php
• visor.php
• estilos.css
• funciones.js

Vamos con el primero. Los comentarios como siempre, dentro del código:

index.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		/* Incluimos la hoja de estilos, la libreria jquery y
                nuestra libreria de funciones */
                <link rel="stylesheet" href="css/estilos.css" />
		<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="js/funciones.js"></script>
		<title>Galer&iacute;a de Im&aacute;genes</title>
	</head>
	<body>

		<div id="galeria">
			<h1>Mi galer&iacute;a de im&aacute;genes</h1>
		<?php
                /* Conectamos a la BD para obtener la informacion de
                las imagenes que tenemos guardadas */
  		$conexion = new mysqli('localhost', 'usuario', 'clave', 'clh');
		$consulta = "SELECT id, titulo, descripcion, archivo
                FROM imagen";

		// Obtenemos el resultado de la consulta
                $resultado = $conexion->query($consulta);

		// Desplegamos las imagenes con un enlace a su id
                while($filas = $resultado->fetch_array(MYSQLI_ASSOC)) {

		?>
		<a href="visor.php?id=<?php echo $filas['id']; ?>">
   <img src="img/t-<?php echo $filas['archivo']; ?>" alt="imagen" />
         </a>
		<?php }
		?>

		</div>

	</body>
</html>

En resumen, lo que hemos hecho en nuestro index.php, yendo paso a paso:

1. Incluimos la hoja de estilo, la librería jQuery y nuestra librería de funciones.
2. Conectamos a la base de datos y obtenemos toda la información de las imágenes que tenemos almacenadas.
3. Desplegamos las imágenes con un enlace hacia el visor y pasamos como parámetro el id de la imagen para luego obtener más información.

Y ahora continuamos con el visor, en donde podremos mostrar las imágenes en tamaño completo y con más información:

visor.php

<?php
/* Obtenemos el id que fue pasado
como parametro por URL, y luego
creamos 2 variables: prev y sig
que corresponden a la id anterior y
siguiente de la imagen actual */
$id = $_GET['id'];
$prev = $id-1;
$sig = $id+1;

/* Conectamos a la BD y obtenemos la
informacion de la imagen actual*/
$conexion = new mysqli('localhost', 'usuario', 'clave', 'clh');
$consulta = "SELECT titulo, descripcion, archivo
FROM imagen WHERE id = $id";

$resultado = $conexion->query($consulta);

$fila = $resultado->fetch_array(MYSQLI_ASSOC);

/* Luego conectamos a la BD y obtenemos la
primera y ultima id de imagen, para saber cuando
se trata de la ultima y/o primera imagen de la
galeria */
$consulta = "SELECT min(id) as minimo, max(id) as maximo FROM imagen";
$resultado = $conexion->query($consulta);

$datos = $resultado->fetch_array(MYSQLI_ASSOC);
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
// Creamos el titulo de la pagina de acuerdo a la imagen
<title>Galer&iacute;a de Im&aacute;genes - <?php echo $fila['titulo'];?>
</title>
// Incluimos la hoja de estilo y librerias
<link rel="stylesheet" href="css/estilos.css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/funciones.js"></script>
</head>
<body>
  <div id="contenedor">
  <?php
/* Comparamos la id actual con la menor id de la tabla
para saber si es la primera imagen de la galeria.
Si no es igual, mostramos un enlace para la imagen
anterior */
	if($id != $datos['minimo']) {
  ?>
  <a  href="visor.php?id=<?php echo $prev; ?>">
  <img src="img/back.png" />
   </a>
/* De lo contrario, mostramos una imagen
indicando que no hay nada antes */
  <?php }
	else {
  ?>
  <img src="img/block.png" alt="Primera imagen" />

  <?php }
  ?>

/* Desplegamos la imagen actual en tamaño completo
con su respectiva descripcion */
  <img id="imgcompleta" src="img/<?php echo $fila['archivo']; ?>"
  alt="<?php echo $fila['descripcion'];?>" />

/* Comparamos la id actual a la mayor id de la tabla
para saber si es la ultima imagen. Si no es igual
mostramos un enlace para la imagen siguiente */
  <?php if($id != $datos['maximo']){
  ?>

  <a  href="visor.php?id=<?php echo $sig; ?>">
  <img src="img/next.png" />
  </a>

/* De lo contrario, mostramos una imagen
indicando que no hay nada despues */
  <?php }
  else {
  ?>
  <img src="img/block.png"  alt="&Uacute;ltima imagen" />

  <?php }?>
/* Establecemos un pequeño div para la
informacion de la imagen. Cuando el usuario
pase el mouse por encima, apareceran los datos
(titulo y descripcion) */
  <div id="masinfo"><h4>Informaci&oacute;n de la imagen <a href="#"><img src="img/add.png" alt="M&aacute;s informaci&oacute;n" /></a></h4></div>

/* Este div mostrara la informacion de la imagen.
Por defecto lo dejaremos oculto mediante CSS y
solo se mostrara al pasar el mouse sobre el */
     <div id="info">
     <p>T&iacute;tulo: <?php echo $fila['titulo'];?></p>
     <p>Descripci&oacute;n: <?php echo $fila['descripcion'];?></p>
     </div>
  </div>

/* Al igual que en index, mostraremos la
galeria completa, solo que esta vez las
imagenes seran mas pequeñas */
 <div id="galeria-small">
	<h3>Mis otras im&aacute;genes</h3>
	<?php 

	$cons = "SELECT id, titulo, descripcion, archivo FROM imagen";

	$res = $conexion->query($cons);

	while($filas = $res->fetch_array(MYSQLI_ASSOC)) {

	?>

	<a href="visor.php?id=<?php echo $filas['id']; ?>">
        <img src="img/t-<?php echo $filas['archivo']; ?>" alt="imagen" />
        </a>

	<?php }

	?>

  </div>
</body>
</html>

Resumiendo el archivo anterior, lo que hicimos fue:

1. Obtuvimos la id enviada por parámetro para obtener la información de la imagen actual.
2. Obtuvimos la primera y última id de imágenes almacenadas para saber cuando tratamos con la primera y/o última imagen de la galería.
3. Cargamos la hoja de estilos y librerías.
4. Comparamos la id actual con la menor existente en la base de datos para saber si es la primera imagen de la galería. De ser así, mostramos una imagen que indica que no hay nada antes. De lo contrario, mostramos una imagen con un enlace a la imagen anterior.
5. Mostramos la imagen actual en tamaño completo.
6. Lo mismo que el punto 4, pero ahora con la última id y la imagen siguiente.
7. Creamos un div para la información de la imagen el cual permanecerá oculto hasta que el usuario pase el mouse por encima.

Ya con eso listo, nos falta declarar nuestras funciones en jQuery y nuestra hoja de estilos. Partiremos por las funciones:

funciones.js

$(function(){

/* Este es un efecto inicial sobre la galeria,
en el cual decimos basicamente que cuando
la pagina cargue, las imagenes se muestren mas
oscuras y que al pasar el mouse por encima
tomen su opacidad natural. Para esto utilizamos
las funciones animate, hover y stop de jQuery. */
  $('#galeria img').animate({
	"opacity" : .5
  });

  $('#galeria img').hover(function(){

	$(this).stop().animate({ "opacity" : 1 });

   }, function(){

	$(this).stop().animate({ "opacity" : .5});

  });

/* Repetimos el mismo efecto para la galeria
pequeña que mostramos en el visor */

  $('#galeria-small img').animate({
	"opacity" : .5
  });

  $('#galeria-small img').hover(function(){

	$(this).stop().animate({ "opacity" : 1 });

  }, function(){

	$(this).stop().animate({ "opacity" : .5});

  });

/* Ahora aplicamos la funcion para que cuando
un usuario pase el mouse por encima del div con id
masinfo, se despliegue la informacion del div info
del visor. Esto lo haremos mediante las funciones
hover, fadeIn y fadeOut de jQuery */

  $('#masinfo').hover(function(){
 	$('#info').fadeIn();
  }, function(){
        $('#info').fadeOut();
  });

});

En resumen, lo que hicimos aquí fue:

1. Creamos 3 funciones para que estén disponibles cuando la página cargue.
2. La primera agregará un efecto de opacidad sobre la galería que se desactivará cuando el usuario pose el mouse encima.
3. La segunda agregará el mismo efecto pero a la galería pequeña que añadimos al visor.
4. La tercera hará aparecer la información de la imagen cuando el usuario pose el mouse sobre el div ‘masinfo’ del visor y a su vez la hará desaparecer cuando mueva el mouse de ahí.

Y ahora nos queda la parte final, que es declarar los estilos:

estilos.css

body {
	background: black;
	color: white;
	font-family: Arial, Helvetica, sans-serif;
	width: 100%;
	margin: 0 auto;

}

#galeria{
	width: 800px;
	margin: 0 auto;
}

#galeria img{
	border: 1px solid white;
	padding: 1px;
	margin-right: 10px;
	margin-bottom: 10px;

}

#galeria-small{
	width: 800px;
	margin: 0 auto;
}
#galeria-small img{
	width: 100px;
	height: 100px;
	border: 1px solid white;

}

#contenedor{
	width: 800px;
	margin: 0 auto;
	padding-top: 10px;
}

#imgcompleta{
	border: 1px solid white;
}

a img{
	border: none;
}

/* Este es el div con informacion de
la imagen. Inicialmente cargara con
display:none para que no sea visto a menos
que el usuario pose el mouse encima */

#info {
	display: none;
}

Y con eso tenemos nuestro resultado final:

Primera vista de la galería

La imagen toma su opacidad natural al pasar el mouse por encima

Vista completa de la primera imagen

Información de la primera imagen al pasar el mouse por encima del div de información

Vista completa de imagen que tiene una previa y una siguiente

Vista completa de la última imagen

Antes de terminar, y comprendiendo que este tutorial ha sido largo, integramos una nueva característica a estos tutoriales:

Y con eso damos por terminado este tutorial, recordándoles como siempre que ha sido:

Esperamos que haya sido de utilidad para Uds. Cualquier duda o comentario que puedan tener, los invitamos a dejarnos unas líneas en el área habilitada a continuación.

Muchas gracias por leer y será hasta una próxima oportunidad.