Crear una galería de imágenes solo con CSS y HTML

Presentación de un código hecho de una galería de imágenes desarrollada completamente en CSS y HTML, explicada de forma que puedan realizarse las modificaciones que se deseen.

Muchas veces sucede que, por desconocer todo el potencial que ofrecen los recursos web más elementales, se aplican herramientas más complejas y que no todos los ordenadores ni todos los navegadores aceptan. CSS es una poderosa herramienta que brinda una infinidad de recursos que no siempre son bien explotados.

Un ejemplo de ello, lo hemos dado con el menú desplegable realizado completamente con CSS y HTML, sin necesidad de aplicar otros lenguajes o animaciones de ningún tipo. Este mismo tipo de recursos nos permite mostrar algunos contenidos de forma tal que simulan ser dinámicos.

El ejemplo que hoy traemos, se trata de una galería de imágenes muy sencilla, con muy poco código, como veremos más adelante, y que está basada en los mismos principios con que fue desarrollado el mencionado menú desplegable. Es más, este ejemplo es aún más sencillo. Pero no por sencillo deja de ser atractivo.

Lo que necesitaremos

Para poder realizar el ejercicio, necesitarán de algunos archivos de imagen que están contenidos en el ejemplo terminado que pueden descargar desde aquí. Luego de descargado el archivo y descomprimido, encontrarán un archivo HTML y un archivo CSS, que tienen el ejemplo ya terminado.

Junto a ellos, se encuentra una carpeta “img” que contiene todas las imágenes necesarias. Dentro de esta carpeta se encuentran dos carpetas más, llamadas “chicas” y “grandes” que son las que tienen las imágenes que utilizaremos en la galería de imágenes propiamente dicha.

El ejemplo ya terminado pueden verlo aquí.

Conceptos generales

Podríamos decir que este trabajo está basado fundamentalmente en un solo concepto, y es el de la visibilidad de las capas. Con CSS podemos determinar si una capa es visible o no mediante el empleo de la etiqueta “visibility”, que puede tener los valores visible, hidden y collapse.

La galería de imágenes constará de una serie de imágenes en miniatura (thumbnails) alineadas en forma ordenada en dos columnas. Cuando se pasa el puntero por estas imágenes, aparece en un recuadro ubicado a la derecha de estas dos columnas la imagen ampliada. Para realizar esto, debemos emplear una etiqueta y uno de sus posibles valores, que para este ejemplo es fundamental: “position: absolute”.

Ahora explicaremos los principios de funcionamiento. Cada par de imágenes (una imagen ampliada con su respectivo thumbnail) se encuentran formando parte del mismo ítem de lista. Cada una de estas imágenes que forman el par, tienen una clase diferente (min y max). La clase min define los atributos del thumbnail.

La clase “max” es la que se refiere a la imagen ampliada, y que tiene una posición absoluta y un valor “hidden” de su atributo “visibility”, lo que hace que en condiciones normales esta imagen no se encuentre visible.

Se emplea una pseudo-clase vinculada a la clase “max” (“a:hover .max”), que es la que hace que el atributo “visibility” adquiera valor “visible” cuando el puntero se posa sobre cualquier elemento que compone el ítem de la lista.

Desarrollo del ejemplo

Como pueden apreciar, para que el tema quede más claro se han definido todos los atributos CSS que están relacionados con la galería en si misma, en un archivo CSS diferente (“galería.css”) del que contiene los atributos de los restantes componentes de la página, de forma que el tema pueda verse con mayor claridad.

Estructura

En primer lugar, definiremos la estructura del menú, que consta simplemente de dos listas no ordenadas (ul), conteniendo cada una de ellas cuatro ítems (li). Las listas tienen sus atributos definidos por la clase “cat”. Como ya dijimos, cada uno de los ítems contiene dos imágenes.

Ubicación de los thumbnails

En primer lugar, debemos ubicar las imágenes en miniatura en dos columnas (cada columna es una lista diferente) y para ello debemos definir en el archivo CSS los atributos de la clase “min” que se encuentran contenidos en los ítems (li).

.cat {
list-style-type: none;
margin: 0 0 25px 10px; /* Eliminacion de viñeta en IE6 */
padding: 0px; /* Eliminacion de viñeta en IE6 */
float:left;
}
li .min {
width: 75px;
height: 64px;
padding: 6px 20px 20px 7px;
}

La primera clase define que la lista no tendrá estilo de lista, se definen los márgenes y el relleno para que se vea como queremos, y le damos el valor “left” a la propiedad “float”, de forma que ambas listas se ubiquen una al lado de la otra flotando a la izquierda. Luego, se definen los atributos de las dimensiones de cada uno de los ítems y el relleno de los mismos, en la regla “li .min”.

Imágenes grandes

Cuando vemos el ejemplo que hemos desarrollado hasta aquí, vemos que se nos presenta un gran espacio en blanco que solo aparecerá cubierto por las imágenes grandes cuando el puntero se pose sobre los thumbnails. Es por esta razón, que incorporamos una imagen que contendrá un mensaje con instrucciones para el usuario, de forma tal que todo el espacio quedará cubierto.

Esto lo realizamos empleando una capa con posicionamiento absoluto, y cuyos atributos aparecen definidos en el archivo CSS con el identificador “#base”:

#base {
width: 410px;
height: 310px;
border: solid 1px #ccc;
position: absolute;
top: 250px; /* Provoca la separacion del borde superior */
left: 500px; /* Separa la imagen grande de la pequeña */
background: url(img/galeria.png);
}

Como vemos, tiene un ancho y una altura definidos. Como hemos querido agregar un borde que aparecerá separado 5px a cada lado de la imagen, las dimensiones son 10px más grandes que las de las imágenes. A su vez, esta capa tiene una imagen de relleno, que es la que se presenta cuando ninguna de las imágenes de la galería está visible.

Ahora solo resta definir el posicionamiento de las imágenes grandes, así como su condición de visibilidad, por lo que definiremos a todos los elementos contenidos dentro de un ítem de lista con la clase “.max”.

li .max{
visibility: hidden;
position: absolute;
top: 256px; /* Provoca la separacion del borde superior */
left: 506px; /* Separa la imagen grande de la pequeña */
}

Como vemos, se define que en condiciones normales estos elementos (imágenes) estarán no visibles. La posición (top y left) son seis pixeles más que los de la capa “#base”, debido al relleno de 5px por lado que hemos definido y al borde de 1px que tiene dicha capa.

A continuación, mediante el empleo de una pseudo-clase, haremos que la capa sea visible cuando el puntero se pose sobre cualquier elemento con enlace contenido dentro del ítem de lista:

a:hover .max {
visibility: visible;
}

El ejemplo ya terminado pueden verlo aquí.

Conclusión

Como pueden ver, el ejemplo es extremadamente sencillo. Se puede ampliar, colocar una mayor cantidad de columnas, modificar las posiciones o cualquier otra cosa que su imaginación les dicte, sin mayores dificultades.