¿Cómo hacer una sencilla galería con CSS y 6 líneas de JavaScript?

Ver ejemplos Descargar fuente

En esta entrada veremos como crear una simple galería con CSS y apenas seis (6) líneas de JavaScript; en entradas anteriores ya dimos algunos experimentos sobre galerías:

• ¿Cómo hacer una simple galería responsive con CSS 1?
• ¿Cómo hacer una simple galería responsive con CSS 2?

Aunque gran parte del código CSS y HTML es el mismo empleado en los anteriores experimentos se han incorporado nuevas modificaciones como la incorporación de seis (6) líneas de JavaScript para crear un efecto de "abrir una imagen" al seleccionar la misma:

Veamos la tabla de contenido para esta entrada:

• Definiendo la estructura (HTML)
• Definiendo el JavaScript
• Definiendo el Estilo (CSS)

Definiendo la estructura (HTML)

Definimos la estructura básica que tendrá la galería; en otras palabras, el HTML:

<div id="container">
<div onclick="galery(this)">
<img src="img/arya-stark.jpg"/>
<span>Arya Stark</span>
</div>
.
.
.
<div onclick="galery(this)">
<img src="Imagen"/>
<span>Descripción</span>
</div>
</div>

Si ha leído algunas de las entradas anteriores de sobre cómo crear una galería, podrás darte cuenta que la estructura HTML no ha variado en lo absoluto a excepción de la incorporación del atributo onclick que invoca a la función JavaScript que veremos a continuación.

Definiendo el JavaScript

Cómo se ha mencionado en el título e introducción de esta entrada: con sólo 6 líneas podemos crear el efecto que al momento de seleccionar una imagen esta se "abra" o lo que es lo mismo, esta ocupe el centro de la pantalla en una mayor proporción; en esencia el JavaScript agrega y remueve una clase llamada select la cual centra la imagen en el medio de la pantalla:

function galery(e){
    if(e.classList.length == 0)
    e.classList.add("select")
    else
    e.classList.remove("select")
}

Definiendo el Estilo (CSS)

La hoja de estilo es uno de los aspecto que más ha cambiado con respecto a las entradas anteriores; expliquemos las reglas principales:

Posicionado de las imágenes (position: relative/fixed)

Uno de los cambios que se presenta es la incorporación de la propiedad position para alterar el flujo del posicionamiento de los elementos HTML como imágenes:

#container div{
    position: relative;
    transition: width 1s, width 1s, top 1s;
    z-index:1;
    /*mas CSS*/
}

Además la incorporación de Transiciones para los cambios suaves entre un estado y otro; la idea es colocar suavemente la imagen seleccionada en el centro de la pantalla a un tamaño mayor al detectar un clic en la misma mediante JavaScript que agrega la clase select:

#container div.select{
    position: fixed;	
    width: 100%;
    height: 100%;
    top: 0;
    left:0;
    z-index:5;
}

En otras palabras, al incorporar la clase select, se activa automáticamente la transición definida en el CSS entre otras propiedades.

Un factor clave aquí es el position: fixed; para colocar la imagen de manera absoluta centrada en la pantalla e independiente del resto del contenido.

También modificamos el margen izquierdo de la imagen adyacente a la imagen seleccionada:

#container div.select + div{
    margin: 5px 3% 5px 31%;
}

El valor 31% es la suma del margen derecho (3%) más el tamaño del contenedor de la imagen (28%); esto evita que el elemento adyacente tome el lugar de la imagen seleccionada y altere el comportamiento de la galería entera; tal cual ejemplificamos en el siguiente video:

Podrás encontrar la demo completa en los siguientes enlaces:

Ver ejemplos Descargar fuente