Crear una galería de imágenes con JavaScript no tiene por qué implicar librerías pesadas, animaciones complejas o decenas de líneas de código. Después de varios experimentos con galerías responsive, llegué a una conclusión clara: la mayor parte del trabajo puede hacerlo el CSS, y JavaScript solo debe actuar como disparador.
En este artículo te muestro cómo construir una galería funcional, responsive y mantenible usando HTML + CSS y apenas seis líneas de JavaScript, logrando un efecto de “abrir imagen” al hacer clic:
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.
Qué vamos a construir y por qué usar JavaScript mínimo
La idea es simple:
- Mostrar varias imágenes en formato galería.
- Al hacer clic en una imagen, esta se “abre” y ocupa el centro de la pantalla.
- Al volver a hacer clic, la imagen regresa a su estado original.
En mis pruebas anteriores con galerías, comprobé que mover elementos, calcular posiciones o animar desde JavaScript solo añadía complejidad innecesaria. En cambio, al delegar el comportamiento visual al CSS y limitar el JavaScript a añadir o quitar una clase, el código se vuelve más limpio y fácil de mantener.
Estructura HTML de la galería
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="img/jon-snow.jpg" />
<span>Jon Snow</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.
Imágenes y descripción
Cada imagen incluye un <img> y un <span> para la descripción. Esta estructura ya la había utilizado en experimentos anteriores, y funcionó bien sin necesidad de cambios importantes.
Uso del evento onclick para activar la galería
La única diferencia respecto a una galería puramente en CSS es el uso del atributo onclick, que invoca una función JavaScript cuando se selecciona una imagen.
JavaScript: abrir una imagen con solo 6 líneas
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")
}Por qué JavaScript solo añade y elimina clases
- El JavaScript se limita a:
- Detectar el clic.
- Añadir o remover la clase select.
- Este enfoque es ideal porque:
- Reduce errores.
- Mejora la legibilidad del código.
- Facilita futuras modificaciones visuales sin tocar JS.
- Ventajas frente a soluciones más complejas. A diferencia de galerías basadas en plugins o librerías:
- No dependes de terceros.
- No cargas JavaScript innecesario.
- El rendimiento es mejor, especialmente en móviles.
CSS: el verdadero motor de la galería
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 en CSS 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.
Transiciones suaves al seleccionar una imagen
Gracias a transition, el cambio entre estados no es brusco. El CSS se encarga de animar el paso de una imagen pequeña a una imagen ampliada.
Cómo centrar la imagen sin romper el layout
Uno de los problemas más comunes que encontré fue que, al abrir una imagen, el resto del layout se desordenaba. Para evitarlo, ajustamos el margen del elemento adyacente:
#container div.select + div{
margin: 5px 3% 5px 31%;
}Ese 31% es la suma del margen y el ancho del contenedor original, lo que evita que los elementos “salten” de lugar.
Hacer la galería responsive sin librerías: Adaptación a distintos tamaños de pantalla
Esta galería funciona bien en pantallas grandes y pequeñas sin necesidad de frameworks. El CSS controla el comportamiento visual y el JavaScript sigue siendo el mismo.
Buenas prácticas con imágenes responsive
Si quieres optimizar aún más, puedes usar imágenes adaptables (srcset) para servir distintos tamaños según el dispositivo. En este caso, al tratarse de una galería simple, no siempre es obligatorio, pero es una mejora interesante para proyectos más grandes.
Cuándo usar srcset y cuándo no es necesario
En mis pruebas, solo recomiendo srcset cuando:
- Las imágenes son muy pesadas.
- Hay mucho tráfico móvil.
- El rendimiento es crítico.
Errores comunes al crear una galería con JavaScript
- Abusar de JavaScript para animaciones
- Uno de los errores más frecuentes es animar todo con JavaScript. El CSS está optimizado para eso y suele ofrecer mejores resultados.
- Problemas de z-index y posicionamiento
- Si la imagen no aparece encima del resto, casi siempre el problema está en el z-index o en no usar position: fixed.
- Layout que se rompe al abrir una imagen
- Esto ocurre cuando no se tiene en cuenta el espacio que ocupaba la imagen original. Ajustar márgenes, como hicimos antes, evita este problema.
Ventajas de esta galería frente a otras soluciones
- ✅ Solo 6 líneas de JavaScript
- ✅ Sin librerías externas
- ✅ Fácil de entender y mantener
- ✅ CSS como protagonista
- ✅ Ideal para proyectos pequeños o educativos
- Después de probar alternativas con GSAP y otras librerías, esta solución terminó siendo la más práctica para muchos casos reales.
Preguntas frecuentes sobre galerías de imágenes con JavaScript
- ¿Se puede crear una galería sin librerías?
- Sí. Como has visto, CSS y JavaScript puro son más que suficientes para una galería funcional.
- ¿Es mejor CSS o JavaScript para las animaciones?
- CSS. JavaScript debería limitarse a controlar estados, no animaciones.
- ¿Cuántas líneas de JavaScript necesito realmente?
- En este caso, solo seis. Y muchas veces, incluso menos.
Conclusión: una galería simple, mantenible y funcional
Si buscas una galería de imágenes con JavaScript simple, este enfoque es difícil de superar. En mi experiencia, cuanto menos JavaScript uses para efectos visuales, más estable y mantenible será tu código.
Con una estructura clara, CSS bien aprovechado y JavaScript mínimo, puedes lograr resultados profesionales sin complicarte.
Podrás encontrar la demo completa en los siguientes enlaces:
Acepto recibir anuncios de interes sobre este Blog.
Aprende a crear una galería de imágenes responsive con HTML y CSS. Tutorial paso a paso con solo 6 líneas de JavaScript para un sitio web rápido y ligero.