Galería de Imágenes con Lightbox

Nuestra Galería de Imágenes con Lightbox es una solución interactiva y elegante para mostrar tus fotografías en tu sitio web. Esta herramienta mejora la experiencia del usuario, permitiendo que tus visitantes vean tus imágenes en alta resolución de manera rápida y sin salir de la página.

Características principales:

Visualización Ampliada: Al hacer clic en cualquier miniatura, la imagen se expande en una vista de pantalla completa para apreciar todos los detalles.
Fondo Oscuro (Lightbox): La imagen ampliada se muestra sobre un fondo oscuro, eliminando distracciones y centrando la atención en el contenido visual.
Navegación Intuitiva: El diseño es sencillo e intuitivo. Los usuarios pueden cerrar la vista ampliada haciendo clic en un botón o en el área fuera de la imagen.
Ligera y Rápida: La galería utiliza miniaturas optimizadas para asegurar que la página cargue rápidamente, mientras que las imágenes de alta resolución solo se cargan cuando el usuario las solicita.
Personalizable: Puedes integrar fácilmente esta galería en tu web, adaptando el diseño para que se ajuste perfectamente a la estética de tu marca.

Esta galería es la manera perfecta de destacar tus portafolios, productos o eventos con un toque profesional y moderno.

Método 1. Archivos de la Nuestra Galería de Imágenes con Lightbox por separado

Para crear una galería de imágenes con lightbox, necesitas tres componentes principales:

HTML: La estructura de la galería, con miniaturas de las imágenes y un contenedor para el lightbox.
CSS: El estilo para la galería y el lightbox (para ocultar el lightbox por defecto y mostrarlo con una superposición oscura).
JavaScript: La lógica que maneja los clics en las miniaturas, muestra el lightbox con la imagen correspondiente y lo cierra cuando se hace clic fuera de la imagen o en un botón de cierre.

Aquí tienes un ejemplo completo de cómo podrías implementarlo.

1. HTML: La estructura

Este código crea una galería con tres imágenes y un div para el lightbox, que inicialmente está oculto.

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Galería de Imágenes con Lightbox</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <h1>Mi Galería de Fotos</h1>

    <div class="gallery-container">
        <img decoding="async" src="imagen1-thumbnail.jpg" data-full-src="imagen1-full.jpg" alt="Descripción de la imagen 1" class="gallery-img">
        <img decoding="async" src="imagen2-thumbnail.jpg" data-full-src="imagen2-full.jpg" alt="Descripción de la imagen 2" class="gallery-img">
        <img decoding="async" src="imagen3-thumbnail.jpg" data-full-src="imagen3-full.jpg" alt="Descripción de la imagen 3" class="gallery-img">
    </div>

    <div id="lightbox" class="lightbox-container">
        <span class="lightbox-close">×</span>
        <img decoding="async" src="" alt="" class="lightbox-image">
    </div>

    <script src="script.js"></script>
</body>
</html>

Nota importante:

He usado el atributo data-full-src en las etiquetas img de la galería. Este atributo no tiene una función por defecto en HTML, pero es perfecto para que nuestro JavaScript sepa cuál es la imagen de alta resolución que debe mostrar en el lightbox.
imagen1-thumbnail.jpg sería la miniatura (imagen pequeña y optimizada para la galería).
imagen1-full.jpg sería la imagen de alta resolución que se muestra en el lightbox.

2. CSS: El estilo

Este CSS se encarga de que la galería se vea bien y de que el lightbox esté listo para ser activado.

CSS

/* Estilos generales */
body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f4f4f4;
    padding: 20px;
}

h1 {
    color: #333;
}

/* Estilos de la galería */
.gallery-container {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.gallery-img {
    width: 250px;
    height: 150px;
    object-fit: cover;
    cursor: pointer;
    border-radius: 8px;
    transition: transform 0.2s ease-in-out;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.gallery-img:hover {
    transform: scale(1.05);
}

/* Estilos del lightbox (inicialmente oculto) */
.lightbox-container {
    position: fixed; /* Fija el lightbox en la ventana */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Fondo oscuro semitransparente */
    display: none; /* Oculta el lightbox por defecto */
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Asegura que esté por encima de todo */
}

.lightbox-image {
    max-width: 90%;
    max-height: 90%;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
}

.lightbox-close:hover {
    color: #ccc;
}

3. JavaScript: La lógica

Este es el corazón de la funcionalidad. El script escucha los clics en la galería y maneja el comportamiento del lightbox.

JavaScript

document.addEventListener(‘DOMContentLoaded’, () => {
    const galleryImages = document.querySelectorAll(‘.gallery-img’);
    const lightbox = document.getElementById(‘lightbox’);
    const lightboxImage = document.querySelector(‘.lightbox-image’);
    const closeButton = document.querySelector(‘.lightbox-close’);

    // 1. Abrir el lightbox
    galleryImages.forEach(image => {
        image.addEventListener(‘click’, () => {
            const fullSrc = image.getAttribute(‘data-full-src’);
            const altText = image.getAttribute(‘alt’);
            
            // Asigna la imagen y el texto alternativo
            lightboxImage.src = fullSrc;
            lightboxImage.alt = altText;
            
            // Muestra el lightbox cambiando su estilo de ‘display’
            lightbox.style.display = ‘flex’;
        });
    });

    // 2. Cerrar el lightbox
    // Cierra cuando se hace clic en el botón de cierre
    closeButton.addEventListener(‘click’, () => {
        lightbox.style.display = ‘none’;
    });

    // Cierra cuando se hace clic fuera de la imagen (en el fondo oscuro)
    lightbox.addEventListener(‘click’, (e) => {
        // e.target es el elemento donde se hizo clic
        // Si el elemento clicado es el contenedor del lightbox, ciérralo
        if (e.target === lightbox) {
            lightbox.style.display = ‘none’;
        }
    });
});

Explicación del JavaScript:

Selección de elementos: Primero, el script selecciona todos los elementos que necesitará manipular: las imágenes de la galería, el contenedor del lightbox, la imagen dentro del lightbox y el botón de cerrar.
Abrir el lightbox: Se recorren todas las imágenes de la galería (galleryImages.forEach(...)). A cada una se le añade un escuchador de eventos (addEventListener) para el evento click. Cuando se hace clic en una imagen, el script:
- Obtiene la ruta de la imagen de alta resolución del atributo data-full-src.
- Asigna esta ruta a la propiedad src de la imagen del lightbox.
- Cambia el estilo display del lightbox a 'flex', lo que lo hace visible.
Cerrar el lightbox: Se añaden dos escuchadores de eventos para cerrar la ventana:
- Uno para el botón de cerrar (closeButton), que simplemente oculta el lightbox.
- Otro para el contenedor del lightbox completo. La condición e.target === lightbox es crucial, ya que asegura que el lightbox solo se cierre si el clic se hizo directamente en el fondo oscuro y no sobre la imagen grande. Esto mejora la experiencia de usuario.

Con estos tres archivos (.html, .css, y .js) correctamente enlazados, tendrás una galería de imágenes funcional con un lightbox básico. Solo necesitas asegurarte de reemplazar las rutas de las imágenes con las tuyas.

Personalizar La Galería de Imágenes con Lightbox

Personalizar y poner tus propias imágenes es el paso más importante. Aquí tienes las instrucciones detalladas para hacerlo.

1. Prepara tus imágenes

Antes de modificar el código, necesitas tener listas las imágenes que vas a usar. Es una buena práctica preparar dos versiones de cada imagen:

Miniatura (Thumbnail): Una versión pequeña y optimizada. Esto hará que la galería cargue rápido. Por ejemplo, foto1-thumbnail.jpg.
Imagen Completa (Full-size): La versión de alta resolución que se verá en el lightbox. Por ejemplo, foto1-full.jpg.

Recomendación: Crea una carpeta dentro de tu proyecto (por ejemplo, llamada images) y guarda todas tus fotos ahí para mantener el orden. Deberías subirlas al hosting de un servidor. Puedes usar muchos gratuitos o de pago. Te recomendamos el servidor de Hostinger

2. Modifica el código HTML

Abre tu archivo index.html y encuentra la sección de la galería:

HTML

<div class="gallery-container">
    <img src="imagen1-thumbnail.jpg" data-full-src="imagen1-full.jpg" alt="Descripción de la imagen 1" class="gallery-img">
    <img src="imagen2-thumbnail.jpg" data-full-src="imagen2-full.jpg" alt="Descripción de la imagen 2" class="gallery-img">
    <img src="imagen3-thumbnail.jpg" data-full-src="imagen3-full.jpg" alt="Descripción de la imagen 3" class="gallery-img">
</div>

Para cada imagen que quieras agregar, copia y pega una de estas líneas y modifica sus atributos:

src: Aquí debes poner la ruta de tu miniatura. Por ejemplo, si tu imagen está en la carpeta images, la ruta sería images/foto1-thumbnail.jpg.
data-full-src: Aquí pones la ruta de la imagen de alta resolución. Siguiendo el ejemplo anterior, sería images/foto1-full.jpg.
alt: Este texto es crucial para la accesibilidad y es una buena práctica. Describe brevemente el contenido de la imagen.

Ejemplo: Si quieres agregar tres fotos de un atardecer, un paisaje y un animal, el código quedaría así:

HTML

<div class="gallery-container">
    <img src="images/atardecer-miniatura.jpg" data-full-src="images/atardecer-full.jpg" alt="Un hermoso atardecer en la playa." class="gallery-img">
    <img src="images/paisaje-miniatura.jpg" data-full-src="images/paisaje-full.jpg" alt="Un paisaje montañoso con un lago." class="gallery-img">
    <img src="images/animal-miniatura.jpg" data-full-src="images/animal-full.jpg" alt="Un gato durmiendo en el sofá." class="gallery-img">
</div>

Con estos sencillos pasos, tu galería mostrará tus propias imágenes con la funcionalidad del lightbox. Solo asegúrate de que las rutas de los archivos sean correctas.

El archivo CSS es donde puedes personalizar completamente la apariencia de tu galería. Aquí tienes una guía detallada con instrucciones y ejemplos para modificar los colores, tamaños y otros aspectos visuales.

Personalización

1. Modificar el estilo de la galería

Abre tu archivo styles.css y busca las secciones correspondientes. He añadido comentarios para que sepas qué hace cada línea.

Esta sección controla el aspecto de las miniaturas de las imágenes y su contenedor.

CSS

/* Estilos generales del cuerpo de la página */
body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f4f4f4; /* Cambia el color de fondo de la página */
    padding: 20px;
}

h1 {
    color: #333; /* Cambia el color del título principal */
}

/* Estilos de la galería */
.gallery-container {
    display: flex;
    justify-content: center;
    gap: 15px; /* Espacio entre las miniaturas */
    flex-wrap: wrap;
    margin-top: 20px;
}

.gallery-img {
    width: 250px; /* Ancho de las miniaturas */
    height: 150px; /* Alto de las miniaturas */
    object-fit: cover; /* Asegura que la imagen cubra el espacio sin distorsionarse */
    cursor: pointer;
    border-radius: 8px; /* Radio de los bordes (para esquinas redondeadas) */
    transition: transform 0.2s ease-in-out;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Sombra de la miniatura */
}

.gallery-img:hover {
    transform: scale(1.05); /* Efecto al pasar el ratón (se agranda un 5%) */
}

Instrucciones para la personalización:

background-color en body: Cambia #f4f4f4 por el color que desees para el fondo de la página (puedes usar nombres de colores como lightblue, o códigos hexadecimales como #ffffff para blanco).
color en h1: Modifica #333 para cambiar el color del título de tu galería.
gap en .gallery-container: Aumenta o disminuye el valor (15px) para cambiar el espacio entre las miniaturas.
width y height en .gallery-img: Ajusta estos valores (250px y 150px) para cambiar el tamaño de las miniaturas.
border-radius en .gallery-img: Un valor de 0 hará que las esquinas sean cuadradas. Aumenta el valor para tener esquinas más redondeadas.
box-shadow en .gallery-img: Cambia el último valor rgba(0,0,0,0.1) para ajustar el color y la opacidad de la sombra. Por ejemplo, rgba(0, 0, 0, 0.3) hará la sombra más oscura.
transform: scale(...) en .gallery-img:hover: Puedes cambiar el valor 1.05 para que la imagen se agrande más o menos al pasar el ratón por encima.

2. Modificar el estilo del lightbox

Esta sección es la más importante para la experiencia del usuario. Aquí controlas el fondo oscuro, la imagen ampliada y el botón de cierre.

CSS

/* Estilos del lightbox */
.lightbox-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Color y opacidad del fondo oscuro */
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.lightbox-image {
    max-width: 90%; /* Ancho máximo de la imagen ampliada */
    max-height: 90%; /* Alto máximo de la imagen ampliada */
    border-radius: 8px; /* Borde de la imagen ampliada */
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3); /* Sombra de la imagen ampliada */
}

.lightbox-close {
    position: absolute;
    top: 20px; /* Distancia del botón de cierre desde arriba */
    right: 30px; /* Distancia del botón de cierre desde la derecha */
    color: #fff; /* Color del ícono de cierre (la 'x') */
    font-size: 40px; /* Tamaño del ícono de cierre */
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
}

.lightbox-close:hover {
    color: #ccc; /* Color del ícono de cierre al pasar el ratón */
}

Instrucciones para la personalización:

background-color en .lightbox-container: El valor rgba(0, 0, 0, 0.9) es un color negro (0, 0, 0) con una opacidad del 90% (0.9). Puedes cambiar el color y, lo más importante, la opacidad. Por ejemplo, rgba(0, 0, 0, 0.7) hará el fondo más transparente.
max-width y max-height en .lightbox-image: Estos valores (90%) controlan el tamaño máximo que la imagen ampliada puede ocupar en la pantalla. Puedes ajustarlos para que la imagen sea más pequeña o más grande.
border-radius en .lightbox-image: Similar a las miniaturas, puedes cambiar este valor para modificar las esquinas de la imagen ampliada.
top y right en .lightbox-close: Modifica estos valores para cambiar la posición del botón de cierre.
color en .lightbox-close: Cambia #fff (blanco) por el color que prefieras para el ícono de cierre.
font-size en .lightbox-close: Aumenta o disminuye este valor (40px) para hacer el ícono más grande o más pequeño.
color en .lightbox-close:hover: Cambia #ccc para elegir el color que aparecerá cuando el usuario pase el cursor por encima del botón de cierre.

Con estas instrucciones, puedes experimentar y ajustar el CSS para que la galería se adapte perfectamente al diseño de tu sitio web. ¡No tengas miedo de probar diferentes valores!

Método 2. Un único archivo para la Galería de Imágenes con Lightbox

Es totalmente posible y, en algunos casos, muy conveniente, colocar todo el código (HTML, CSS y JavaScript) en un solo archivo. Esto se logra incrustando el CSS y el JavaScript directamente en el archivo HTML.

Aquí tienes cómo se vería el código en un único archivo index.html:

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Galería de Imágenes con Lightbox</title>

    <style>
        /* Estilos generales */
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            background-color: #f4f4f4;
            padding: 20px;
        }

        h1 {
            color: #333;
        }

        /* Estilos de la galería */
        .gallery-container {
            display: flex;
            justify-content: center;
            gap: 15px;
            flex-wrap: wrap;
            margin-top: 20px;
        }

        .gallery-img {
            width: 250px;
            height: 150px;
            object-fit: cover;
            cursor: pointer;
            border-radius: 8px;
            transition: transform 0.2s ease-in-out;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        .gallery-img:hover {
            transform: scale(1.05);
        }

        /* Estilos del lightbox (inicialmente oculto) */
        .lightbox-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.9);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .lightbox-image {
            max-width: 90%;
            max-height: 90%;
            border-radius: 8px;
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
        }

        .lightbox-close {
            position: absolute;
            top: 20px;
            right: 30px;
            color: #fff;
            font-size: 40px;
            font-weight: bold;
            cursor: pointer;
            transition: color 0.2s;
        }

        .lightbox-close:hover {
            color: #ccc;
        }
    </style>
</head>
<body>

    <h1>Mi Galería de Fotos</h1>

    <div class="gallery-container">
        <img decoding="async" src="images/atardecer-miniatura.jpg" data-full-src="images/atardecer-full.jpg" alt="Un hermoso atardecer en la playa." class="gallery-img">
        <img decoding="async" src="images/paisaje-miniatura.jpg" data-full-src="images/paisaje-full.jpg" alt="Un paisaje montañoso con un lago." class="gallery-img">
        <img decoding="async" src="images/animal-miniatura.jpg" data-full-src="images/animal-full.jpg" alt="Un gato durmiendo en el sofá." class="gallery-img">
    </div>

    <div id="lightbox" class="lightbox-container">
        <span class="lightbox-close">×</span>
        <img decoding="async" src="" alt="" class="lightbox-image">
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const galleryImages = document.querySelectorAll('.gallery-img');
            const lightbox = document.getElementById('lightbox');
            const lightboxImage = document.querySelector('.lightbox-image');
            const closeButton = document.querySelector('.lightbox-close');

            // 1. Abrir el lightbox
            galleryImages.forEach(image => {
                image.addEventListener('click', () => {
                    const fullSrc = image.getAttribute('data-full-src');
                    const altText = image.getAttribute('alt');
                    
                    // Asigna la imagen y el texto alternativo
                    lightboxImage.src = fullSrc;
                    lightboxImage.alt = altText;
                    
                    // Muestra el lightbox cambiando su estilo de 'display'
                    lightbox.style.display = 'flex';
                });
            });

            // 2. Cerrar el lightbox
            // Cierra cuando se hace clic en el botón de cierre
            closeButton.addEventListener('click', () => {
                lightbox.style.display = 'none';
            });

            // Cierra cuando se hace clic fuera de la imagen (en el fondo oscuro)
            lightbox.addEventListener('click', (e) => {
                // Si el elemento clicado es el contenedor del lightbox, ciérralo
                if (e.target === lightbox) {
                    lightbox.style.display = 'none';
                }
            });
        });
    </script>
</body>
</html>

Ventajas y Desventajas de un único archivo

Ventajas	Desventajas
Facilidad de uso: Es ideal para proyectos pequeños, pruebas rápidas o si quieres compartir un solo archivo.	Mantenimiento complejo: Si el código crece, se vuelve difícil de leer y mantener.
No hay dependencias: No necesitas asegurarte de que los archivos CSS y JS estén en las carpetas correctas.	Falta de reutilización: No puedes usar el mismo CSS o JS en otras páginas de tu sitio sin copiarlo.
Carga más rápida (pequeñas webs): El navegador no tiene que hacer peticiones adicionales para descargar los otros archivos.	Caché del navegador: Los archivos externos pueden ser almacenados en caché por el navegador, lo que acelera la carga en visitas futuras. Un solo archivo debe descargarse por completo cada vez.

Usar un solo archivo es una buena opción para este tipo de proyecto simple. Sin embargo, para proyectos más grandes, siempre es recomendable separar el código en archivos HTML, CSS y JS distintos para una mejor organización y mantenimiento.

Personalización

La personalización de las imágenes y del CSS es exactamente la misma, incluso si pones todo el código en un único archivo.

La diferencia principal es solo dónde está ubicado el código:

Archivos separados: El CSS está en un archivo styles.css y el HTML se enlaza a él con <link rel="stylesheet" href="styles.css">.
Archivo único: El CSS está incrustado directamente en el HTML, dentro de la etiqueta <style>.

En ambos casos, las reglas de CSS que modificas (como width, color, background-color, etc.) seguirán funcionando de la misma manera.

Lo mismo aplica para la personalización de las imágenes. Tanto si tienes archivos separados como un único archivo, la forma de agregar y modificar las imágenes en la galería es la misma:

Modificas el atributo src con la ruta de tu miniatura.
Modificas el atributo data-full-src con la ruta de la imagen de alta resolución.
Modificas el atributo alt con la descripción de la imagen.

Así que puedes usar las instrucciones de personalización que te di antes sin problemas, sin importar si usas un archivo único o varios.