comparte el articulo 

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

Actualizado el 12/09/2013 < > 12 Cometarios

Resumen: 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.

Publicado el 05/07/2010, última actualización 12/09/2013.

Licencia: Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Andrés Fernández

URL: LaWebera.es :: Diseño Web

Añadir Comentario (Subir al texto)

12 Cometarios

  1. Sandra

    hola no le entendi muy bien, bueno baje el archivo comprimido pero en el texto dcie que deberiand e ser dos archivos de .css y uno html pero en la carpeta descomprimida nada mas viene uno de .css y uno html y las fotos, mi duda es que si falta el otro archivo o el codigo esta completo? saludos bye

    Jueves, 8 de julio 2010

  2. Andrés Fernández

    Hola Sandra:

    Es cierto que el artículo dice que el archivo comprimido contendría dos archivos CSS. Y es que en un principio pensé en dejar separadas las reglas relativas al funcionamiento de la galería, pero luego lo agregué al archivo único y olvidé modificar el artículo.

    El archivo comprimido, como podrás ver contiene todo lo necesario y la galería funciona perfectamente.
    Un cordial saludo.

    Viernes, 9 de julio 2010

  3. Cosme

    Me encantó, gracias!

    Miércoles, 29 de septiembre 2010

  4. Victoria

    Hola, he leído varios posts de uds para hacer el sitio Web y me han servido de mucho, se les agradece. Pero tengo una consulta y les pido perdón si es que ya está respondida en algún lado, pero la verdad que si es así, no lo encuentro. Tengo el problema que al hacer mi sitio, tengo dos columnas, y resulta que en la de la izquierda tengo todos banners y demás, y en la de la derecha tengo el contenido escrito que corresponde a cada pestaña (botón), y el gran problema es que cada vez que escribo a la derecha, la columna de la izquierda se me desacomoda, y se me va para abajo, quedando todo un espacio blanco encima. Tienen idea de como solucionarlo? siempre tengo el mismo problema y no logro encontrar la solución. Aclaro que tengo el sitio hecho con una DWT a la cual están unidas todas las páginas. Les pido por favor si pueden ofrecerme una respuesta porque me estoy volviendo loca. Muchas gracias.

    Sábado, 26 de marzo 2011

  5. Andrés Fernández

    Hola Victoria:
    Te recomiendo que leas:
    Manual de maquetación
    8 consejos para el diseño de un buen layout
    Ejemplos de layouts
    Y especialmente el siguiente artículo, que seguramente encuentres la solución:
    Tamaño, bordes y rellenos de capas

    Miércoles, 30 de marzo 2011

  6. Jesús

    Chamo, anduve leyendo los artículos de tu página, y son demasiado, me han ayudado un montón, este y otro artículo acerca de menúes desplegables y rollover. En ninguna parte conseguí entender nada, sino acá. De pana, sigue así, hay mucha gente que aprecia trabajos como el tuyo!

    Miércoles, 1 de febrero 2012

  7. piso13

    Hola, buenisimo el tutorial, ya lo aplique en la pagina y funciona muy bien!
    Quisiera saber si se puede agregar un texto que aparezca debajo de cada imagen grande (.max)
    Es decir que al pasar el puntero por la imagen en miniatura, aparezca la imagen en grande y un texto debajo de esa imagen grande, que sera diferente en cada una. Muchas gracias!

    Lunes, 4 de junio 2012

  8. José.

    Hola amigo, sabes que me gustó mucho la página que sale con ese archivo que descargué.

    Bueno, la pregunta es, ¿Puedo editarlo y subirlo a mi hosting, haciendo una página web con ése código?, bueno, si es que no se puede, lo entiendo.

    Saludos, y gracias por el tutorial!

    Domingo, 5 de agosto 2012

  9. Verónica

    Por supuesto, lo compartimos para que el que le pueda ser útil lo use libremente en sus propios proyectos. Adelante!

    Jueves, 9 de agosto 2012

  10. Francisco

    Hola que tal,

    Antes que nada excelente tutorial! Sin embargo me deja con una duda… Como puedo hacer que en lugar de que sea al pasar el mouse sea al darle click (a:active) y la imagen (max) se quede hasta que se le de click a otra?

    Mil gracias

    Francisco Q.

    Sábado, 19 de enero 2013

  11. jose n

    hola, como se hace para que las miniaturas esten mas juntas, que el espacio entre ellas sea menor

    Viernes, 8 de febrero 2013

  12. fabiola

    gracias por compartir conocimiento, tengo 2 días buscando como hacer una galería y tu ejemplo es el mejor de la web tienen una excelente página saludos.

    Sábado, 16 de noviembre 2013

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras