Bases de Datos

Ξ 43 comentarios

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

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

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á.

toolsImplementos 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.

Comparte este tutorial

El culpable de todo esto

Las tardes gloriosas de domingo y las grandes ovaciones a estadio lleno, no son algo extraño para Xabadu. Luego de ser descubierto a los 4 años en un partido de barrio por los ojeadores del gran Aviación F.C., sacudió el mercado nacional al ser traspasado en $500 pesos chilenos (1 USD) y 3 coca colas al renombrado Estrella Blanca de Lolol. Luego de una impresionante carrera por equipos como Lozapenco, Santa Cruz, Deportivo Lago Chungará y una incursión en la 3a división del futbol de Kazajstan, su record imbatible hasta la fecha de 1257 goles en 20 partidos lo llevo a ser elegido como uno de los arqueros más recordados en la historia pelotera nacional. Una lesión en el colmillo superior derecho lo llevó al retiro el año 2003, pero está de vuelta y sin duda que su jerarquía y experiencia internacional será un gran aporte.

En los barrios marginales se le conoce como: Xabadu

Comentarios en Facebook

43 Comentarios

  • Muy buena aportación esta muy padre

  • Oye buenísimo!. No sé si lo vaya a usar, pero en caso de… ya sé donde buscar!. Felicitaciones una vez más!

  • Como siempre CLH, impecable…

  • Genial.. nada más que decir!!!.. Como siempre Ustedes la LLEVAN!!!

  • Muy bueno el tutorial, como puedo hacer para ingresar mas fotos pero que cada 4 fotos baje una fila, que cada 4 fotos vaya bajando?.
    Atento a sus comentarios
    Saludos
    Felipe

  • @Felipe: Tienes 2 opciones:

    a) Ajustar vía CSS el ancho del div que incluye las imágenes (galería) para que alcancen 4 thumbnails y ahí automaticamente saltará a la línea siguiente, por ej. si cada thumbnail tiene un ancho de 200px, que el div sea de 800px.

    b) Vía PHP incluir un contador cada vez que se incluya una imagen y luego añadir un if que pregunte si el contador alcanzó 4 y ahí añadir en vez de una imagen un salto de línea.

    Cuéntanos como te va con eso.

    Saludos!

  • Hola Xabadu, justo venia a escribir mi solución y vi tu respuesta. Lo que hice fue crear un contador  en el archivo index y en el visor que cada 4 fotos bajara.
    y fue asi:

    $baja =4;
      while ($rows = mysql_fetch_array($res)){
      ?>
      <a href=”visor.php?id=<?php echo $rows['id'];?>”>
      <img src=”img/t-<?php echo $rows['archivo'];?>” alt=”imagen”>
      </a>
      <?php
      if($rows['id'] == $baja){
      ?>
      <br>
      <?php
      $baja = $baja + 4;
      }
      } ?>

    me han servido de mucho sus articulos de php, he aprendido demasiado con estos tutoriales como este, el de la cuenta usuarios y sesiones. gracias a esto y un poco de sql me he ganado un puesto de trabajo.
    Muy agradecido de uds
    Un cordial Saludo.
    Felipe

  • muy bueno los tutoriales, gracias por compartir el conocimiento

  • alguna idea para poder agregarle la opción de que le agreguen comentarios  a cada foto????… de antemano muchas gracias… y felicitaciones por este tutorial.
     

  • @axel: Tomaremos en consideración eso para agregarlo a una nueva versión de este tutorial que tenemos en mente. Así que atento.

    Saludos!

1 2 3 5

Deja un comentario

Ingresa con tu cuenta de Cómo Lo Hago

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Gente linda que nos quiere

Donde mas estamos