1 Galerías de imágenes con CSS.

Al igual que los otros apuntes sobre hojas de estilos CSS vamos a escribir código según las recomendaciones del W3 y por lo tanto funcionará en aquellos navegadores que sigan dichas recomendaciones, por lo tanto funcionará correctamente en Firefox además también lo hará en Internet Explorer 7 pero como todavía muchos internautas utilizan Intenet Explorer 6, el código contendrá lo necesario para que nuestra página se visualice correctamente con este navegador. En cuanto a versiones anteriores no vamos a mantener la compatibilidad ya que son utilizados por muy pocos internautas y además a nivel didáctico sería nefasto ya que no podríamos obtener una norma ni tan siquiera una pauta de comportamiento a la hora de escribir nuestro código CSS.

Además es importante tener en cuenta que el código no es interpretado de igual manera con DTD diferentes, los ejemplos aquí explicados son validos para XHTML Transitional y Strict, no así para cualquier otro tipo de documento. Incluso dependiendo de la versión de IE6 que se tenga instalada puede haber diferencias al utilizar Transitional o Strict.

Las galerías de imágenes con CSS presentan ventajas frente a las típicas galerías creadas usando JavaScript. Ventajas en cuanto a eficiencia y rapidez de ejecución y también en lo referente a las recomendaciones de accesibilidad Web. Lo anterior no quiere decir que no se puedan usar galerías creadas con JavaScript u otros lenguajes de programación.

¿Pero a qué nos referimos con el término galería de imágenes? Se trata de mostrar unas imágenes en miniatura de fotos sobre cualquier tema de forma que al situar el ratón sobre estas miniaturas o bien al hacer clic se muestre una imagen más grande de esa foto.

2 La idea.

¿De dónde nos viene la idea de usar CSS para hacer galerías de imágenes? Seguramente viene de percatarse de las posibilidades que ofrecía el hecho de que con CSS podemos controlar la visibilidad de los elementos mediante las propiedades visibility o display, lo que hace posible que las imágenes grandes se vean o no a voluntad. Pero esto no sería suficiente ya que necesitamos que la acción (ver o no ver una imagen) se produzca al hacer clic o al situar el ratón sobre algún elemento (miniatura, texto o ambos). Lo anterior será posible gracias a las pseudo clases (hover,active,focus,visited...) de CSS.

Por lo tanto, combinando pseudo-clases con una de las dos propiedades que controlan la visibilidad de los elementos deberíamos ser capaces de crear una galería de imágenes sin demasiados problemas.

3 Proceso de creación de una galería de imágenes con CSS.

Empezaremos por el caso más simple de todos, en atención a que funciona con casí el mismo código en los tres navegadores más usados ( suponen el 98% de todos los usuarios de Internet ). Se trata de una galería en la cual al hacer clic sobre las miniaturas se muestra la imagen ampliada.

1.- Necesitamos tener preparadas las imágenes a utilizar, que serán fotos de dos tamaños diferentes unas pequeñas para las miniaturas y otras de tamaño grande, para verlas con detalle. En nuestro caso los tamaños de los dos grupos de imágenes son: miniaturas de 50x39px y las grandes de 250x194px. Los tamaños dependerán de las imágenes de las que partamos y del espacio disponible en la página Web.
Las imágenes pueden guardarse todas en la misma carpeta o en carpetas separadas como es la opción adoptada en este caso.

2.- Para hacer una galería con CSS podemos utilizar diferentes caminos pero en este primer ejemplo, y para seguir practicando con los elementos de los apuntes anteriores, vamos a utilizar listas desordenadas. Más adelante haremos lo mismo utilizando capas (div) o sólo enlaces (a).

3.- Como vamos a utilizar listas lo primero será crear (dentro del cuerpo del documento,por supuesto) la lista desordenada con los enlaces que en este caso serán enlaces a ninguna parte. El código será el siguiente:

El resultado será el siguiente:

• Enlace1
• Enlace2
• Enlace3
• Enlace4

Podemos preguntarnos por qué utilizamos enlaces y la respuesta es porque ya sabemos como aplicarles las pseudo-clases y porque además de funcionar mejor en la mayoría de los casos también creo que resulta más fácil de entender

Esto es lo mismo que para crear un menú con listas, así que ahora vamos a añadir la foto pequeña en lugar del texto y la foto grande. Lo haremos sólo para el primer elemento de la lista (por cuestiones de espacio durante la explicación) al final añadiremos las imágenes a todos los elementos de la lista.

Con esto tenemos lo siguiente:

• 
• Foto2
• Foto3
• Foto4

Recordad que lo voy a hacer sólo con una imagen hasta el final. Se ven las dos fotos, además aparece la viñeta de las listas. Así que vamos a ocultar la foto grande y quitar la viñeta y la sangría izquierda de las listas. Para diferenciar la imagen pequeña de las grandes necesitamos utilizar clases (atributo class) o id's (atributo id). En este caso utilizaremos clases; la clase "min" para las imágenes pequeñas y la clase "gran" para las grandes.

4.- Ahora definimos los estilos para hacer lo que comentamos antes, eliminar viñetas y sangría de las listas y ocultar la foto grande. Para ocultar podemos usar visibility:hidden o display:none, yo suelo preferir la primera pero dependiendo del contexto puede ser necesaria la segunda.

Veamos el resultado de todo lo anterior:

• 
• Foto2
• Foto3
• Foto4

Como se puede observar tenemos la miniatura muy separada del párrafo anterior, eso es debido a que la foto grande, aunque no se ve, sigue estando ahí y ocupa un lugar. Si queremos que la miniatura quede más próxima al párrafo anterior tendremos que dar la posición de la foto grande mediante propiedades de posicionamiento, tal y como se muestra a continuación.

Nos acercamos a lo que buscamos.

• 
• Foto2
• Foto3
• Foto4

5.- Llegados a este punto sólo nos falta que al hacer clic sobre la foto pequeña, se haga visible la de mayor tamaño. Como ya dijimos antes para lograr esto haremos uso de las pseudo-clases, la que se corresponde con el hecho de hacer clic es :focus y para el Internet Explorer es :active, por lo cual tenemos que utilizar ambas para que la mayoría de los internautas puedan contemplar nuestra galería. A continuación el código de los estilos CSS.

Código a poner en la cabecera (head) del documento XHTML.

Después de añadir el código anterior a nuestra página el resultado será (probar que se ve la foto al hacer clic sobre la miniatura:

6.- Ahora ya sólo nos queda añadir el código para insertar el resto de las imágenes dentro de la lista.

El resultado de este añadido es el que se muestra a continuación:

Ahora solo nos quedaría darle un aspecto más elegante, añadiendo colores de fondo, bordes o lo que se nos ocurra.

7.-Una cosa que podemos añadir sin demasiada complicación es que al situar el ratón sobre las miniaturas se vea la imagen grande. Para Firefox e Internet Explorer 7 sólo hay que añadir una línea a los estilos CSS, donde definiremos la propiedad visibility como visible para las imágenes de la clase gran dentro de la pseudo-clase a:hover. Lamentablemente esto no es suficiente para Internet Explorer 6 y deberemos añadir a esta pseudo-clase la propiedad display:inline también podría ser el valor block, pero si vamos a utilizar colores de fondo en la lista es mejor la opción inline. También es conveniente por no decir obligatorio, poner la imagen grande que se vea encima de todas las demás mediante la propiedad z-index con un valor mayor que el que tengan cuando están activas. Esto lo hacemos para que se vean todas las imágenes al pasar el ratón por encima (probar a no poner z-index y vereis lo que pasa si haceis clic en la última imagen y luego os situaís sobre cualquier otra) lamentablemente al estar hecha con una lista, esto último no sirve en IE6. Si funcionará si lo hacemos sin utilizar listas es decir con enlaces solamente.

Podemos comprobar su funcionamiento a continuación.

En este enlace podeís ver el ejemplo terminado después de agregarle algunos elementos decorativos como textos explicativos, bordes y colores de fondo. También se pueden hacer sin utilizar listas sin dejar de ser correctísimas e igual de válidas.

Siguiendo un proceso como el anterior, es decir, yendo paso a paso y pensando lo que hacemos podemos crear infinidad de diseños diferentes.