Galería de imágenes adaptable con efecto lightbox

admin · 13 March 2025

Galería adaptable con un paginador dinámico, así como botones para navegar entre las páginas y un efecto de lightbox para las imágenes, podemos utilizar HTML, CSS y un poco de JavaScript. A continuación, te muestro un ejemplo simple que puedes usar como punto de partida.

Código completo:

Code:

<div class="gallery">
    <div class="gallery-images" id="gallery-images"></div>
    <div class="paginator">
        <button id="prev">Anterior</button>
        <span id="page-info"></span>
        <button id="next">Siguiente</button>
    </div>
</div>

<!-- Lightbox -->
<div id="lightbox" class="lightbox">
    <span class="close" id="close-lightbox">&times;</span>
    <img class="lightbox-content" id="lightbox-img">
</div>

<script>
const images = [
    'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHVG1nr4WQJ7TUdv4-h0RPSCpaaQeIQMozULHCzK16D7ahg5CZ4ycZvZUq6M_FaTJDaa2OhIj4jerSpZQHu_iy9KGQyHyrdRcszGO6d4LBkUn2yU3gV5RQ4KX8CBU2AsGdIXkyqPEoWbQrZHiTuJjIudHl84inwrluNTYWjIZijQkNxg20glsg4050Y5o/s1600/noche%20pocker.jpg',
    'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0KH-w2dS8klpebBdveS5O9CdtXVbKRw86U7i0ZaIDnU0lTxqS4dzdoFsdRjoklukR29TvtQ1RHctIc1BhbydycUIfzN2cpB3T91JzCL7iHuAnju4QUAJ4ugsFjgqaRG6FMY2vk_nnhtzfFr2ox7bd0F1pLeToxqHmooW-fK9aZbvneet79gHldpjZ0Fk/s1600/El%20parca%20toca%20el%20violonchelo.jpg',
    'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3wLmnfdhGAXcfu4DO8RFsnO0rrv9XjHxL-BmgmR2AKdr5dd9z1tyL9FMWWQF4G_HsBUnZkGynp94yK1jPD00V-Vrrv_nvpRhIGk7EgF88ZQE0bcUOEcKg-sY0uuKi3o7HqrKhhHP4TIl-Yh-hV_HkE1p7-SmJQNABqdXPY3bcEFiGoCzQLiBmzJno18o/s1600/El%20%C3%A1rbol%20de%20la%20luna%20de%20sangre.jpg',
    'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY8I3AAB1TQU9YFJOSbRwAoY0vg_R8FKsVwm4YW5xqF0Q13BgEr-qOYl8hKREkezZdTJmObIP_Gb2EaMidptsM6OmdemG83jqM0iBnwatrAVs0Iz27UExmjaG0MluS76utNy1Lm3CMipQpwAGFAX3edEHsKGf-XLuy1B7eJ_WyuI6naQcGmJtATZsB7I8/s16000/La%20noche%20de%20las%20plantas.jpg',
    'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhOqoWvPaISoNTifUogaEJCu1pw0xK11csXr5HVk1D0jxgdN7oIoFiwoI8-TW5siCvubz16BvJ3-fgMCCxDoQ9YEuxjX9fUwAsmLVcY3kvJDrK1bXTN3ypUBorWUGS4QjQ3T9yKpLehLQW9RM0IalLhcS7Dd41Mi-PE4YGMhVRdmcbV1m5ZTi2hMFsMjw/s1600/Centro%20comercial.jpg',
    'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ13e8OOhuXh3uVTDf7lnEMje8s3hbtpZe8kMZpsP038RJsVNdZH5tyCoWypbFO5bG1tOuy1ZpMX-4eS2poPA3cbpx9cOoT4KfVuSVP76VX80wP_QP9ZX_zZhEPXVDUfi78VdvU-Gt0cMFrdf3YziijeoxXv2V9t_Er8vdYZkxipgmEFhHRW6RGeGGe-4/s1600/Tu%20eres%20mio.jpg',
    'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinjY4IwKpZwpznxyPQNYwKxkfFgvS4mETfI07QSSUf5IyTrbj5YtcoF-SYyv4TMt_JhCQkiUdH8xbAAw80N4uTI4yRLYgVABCM79PuoHD1XTjPn8xILE0oOxhauW9hGsO549VCkg1x7DCy_5COXXgx6gnsdFWBBZx6vSVb_RVIbzicm1rA4DHW1-C4KEs/s1600/La%20noche%20de%20las%20plantas%202.jpg',
    'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkDSvgBSDkMXvmWdHYTi8D69KBuY93D0_X3KETY549SxT6IttDr6mmbVJJ-QS9wjVjmy_tHuuqjZTBtoEvm-HqMvyyHvAsFPdTR9mji5-dLyXGHe8szrSERcbh6KuPH5GYL_CRYRHRKyePScRx28duN99qVTc0Tf6wUxgz14goMuH2sRdGKDhkTLljmhc/s1600/La%20noche%20de%20las%20plantas%203.jpg',
    'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQBdpV-5h6r1wHG9_Wk9Ep9EJNpy0jHMhyphenhyphenbOpUTzFXkvIcsgrDK9YJi9TwS0a2HIif9YnBo-JGvWsfh3f5RKEOs9L_xKgHzHqFx47QqAvPqJ-TWFR1H2vqghQS7Aq0LZgJIrIpNL6fUqT5bV5itMWroadz-NI9eysj6qwqmgQ4da6INFMf4XUnasCzM7Q/s1600/La%20noche%20de%20las%20plantas%204.jpg',
    'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjDG6w1DCBBOmHfWFXorYDRmH7gSRVxMN4S8NYcd6qc5EpGDdavc1DqXdfBMdpSuBVrRCEV6Eydvk1uryToWtwv-ZuNhc5yZnAw65L0Lc7OKlc3rQuq0CxbE3WRquhnF0VC0RVdnPevnzZuDGJ8seH9aSOj0S_juQGdp7Q_pViZnnx9lekxHevI_jEnYM/s1600/La%20noche%20de%20las%20plantas%205.jpg',
    'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguQyhK-cw_dAZHgJ2TL-_5a2B4_p5aD3FUk0EKdI1H1MWqsT777d_W73E6SPA0VTGTMHSrdus3kwOUq771-UcOMDVqkew7nCWJos2eqDvBy0tdgltNaMzj7uuU6nm-JSRWiHEHvrYW3RBsvG4MYzSPGBC1e_bYAtvEOsKqh3tb1MHsb-TrcMRB5cksH90/s1600/La%20noche%20de%20las%20plantas%206.jpg',
    'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEcZPXYnm8Tdju-zFPEplB9eZtEeotMFkjWYdW3zrm9W3OVtwtUM5xSC6_RH27SP1xtPRzqIo9BlBm0IB2PQP2qRryibhIAPReq-0jz37BkRjZk50xK-m6ErHv92Aztk6YQp7vH_1cBBkFpMj4t7djlnvbIpRXuK6OPWs8MqL3owGG67wioY36vUaiCh8/s1600/El%20%C3%A1rbol%20de%20la%20luna%20de%20sangre.jpg',
    'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz_J0nyiyWO4Y3bxQZ07lT413FfjafyiIEP8CDtjXOfTgbJ45xJgxuADLEyZZslYtjF0Oei93zsooB33ofQ6vcANzNOPrV_GMBkBFldzz1BGvJSuSfGBT-O2K2ZY-xRRRYZ9g4EAzl8dMZVcZ0FkU3K-ylnQeMwaoyEcQPGFuArt256sOkR5_EftO0csw/s1600/El%20%C3%A1rbol%20de%20la%20luna%20de%20sangre%202.jpg',
];

const imagesPerPage = 12;
let currentPage = 0;

function renderGallery() {
    const galleryImages = document.getElementById('gallery-images');
    galleryImages.innerHTML = '';

    const startIndex = currentPage * imagesPerPage;
    const endIndex = startIndex + imagesPerPage;
    const currentImages = images.slice(startIndex, endIndex);

    currentImages.forEach((image, index) => {
        const imgElement = document.createElement('img');
        imgElement.src = image;
        imgElement.alt = 'Imagen de la galería';
        imgElement.onclick = () => openLightbox(startIndex + index);
        galleryImages.appendChild(imgElement);
    });

    document.getElementById('page-info').textContent = `Página ${currentPage + 1} de ${Math.ceil(images.length / imagesPerPage)}`;
}

function openLightbox(index) {
    currentImageIndex = index;
    const lightbox = document.getElementById('lightbox');
    const lightboxImg = document.getElementById('lightbox-img');
    lightboxImg.src = images[currentImageIndex];
    lightbox.style.display = 'flex';
}

function closeLightbox() {
    document.getElementById('lightbox').style.display = 'none';
}

document.getElementById('close-lightbox').onclick = closeLightbox;

document.getElementById('prev').onclick = () => {
    if (currentPage > 0) {
        currentPage--;
        renderGallery();
    }
};

document.getElementById('next').onclick = () => {
    if ((currentPage + 1) * imagesPerPage < images.length) {
        currentPage++;
        renderGallery();
    }
};

document.addEventListener('keydown', (event) => {
    if (event.key === 'Escape') {
        closeLightbox();
    } else if (event.key === 'ArrowLeft') {
        if (currentImageIndex > 0) {
            currentImageIndex--;
            updateLightboxImage();
        }
    } else if (event.key === 'ArrowRight') {
        if (currentImageIndex < images.length - 1) {
            currentImageIndex++;
            updateLightboxImage();
        }
    }
});

function updateLightboxImage() {
    const lightboxImg = document.getElementById('lightbox-img');
    lightboxImg.src = images[currentImageIndex];
}

// Inicializar la galería
renderGallery();
</script>

<style>
.gallery-images img {
    width: 100px; /* Ajusta el tamaño según tus necesidades */
    height: auto;
    margin: 5px;
    cursor: pointer;
}

.lightbox {
    display: none; /* Oculta el lightbox inicialmente */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
}

.lightbox-content {
    max-width: 90%;
    max-height: 90%;
}

.paginator {
    margin-top: 10px;
}
</style>

Galería de imágenes adaptable con efecto lightbox

admin

Administrator

Nuevos temas