lightbox.js

/* =========================================================
   LIGHTBOX DE GALERÍA — Raúl Seco
   Clic en una pieza → se abre a pantalla completa, con
   navegación anterior/siguiente y cierre.
   ========================================================= */
(function(){
  document.addEventListener('DOMContentLoaded', () => {
    const piezas = Array.from(document.querySelectorAll('#galeria .pieza'));
    if(!piezas.length) return; 

    // ---------- construir el DOM del lightbox ----------
    const lb = document.createElement('div');
    lb.id = 'rs-lightbox';
    lb.innerHTML = `
      <button class="rs-lb-cerrar" aria-label="Cerrar">✕</button>
      <button class="rs-lb-nav rs-lb-prev" aria-label="Anterior">‹</button>
      <div class="rs-lb-marco">
        <img class="rs-lb-img" src="" alt="">
        <div class="rs-lb-pie">
          <span class="rs-lb-tag"></span>
          <span class="rs-lb-contador"></span>
        </div>
      </div>
      <button class="rs-lb-nav rs-lb-next" aria-label="Siguiente">›</button>
    `;
    document.body.appendChild(lb);

    const style = document.createElement('style');
    style.textContent = `
      #rs-lightbox{
        position:fixed; inset:0; z-index:9998;
        background:rgba(5,5,5,0.96);
        backdrop-filter: blur(6px);
        display:flex; align-items:center; justify-content:center;
        opacity:0; visibility:hidden;
        transition: opacity 0.45s cubic-bezier(.2,.7,.2,1), visibility 0.45s;
      }
      #rs-lightbox.rs-lb-activo{ opacity:1; visibility:visible; }

      #rs-lightbox .rs-lb-marco{
        max-width:88vw; max-height:86vh;
        display:flex; flex-direction:column; align-items:center;
        transform: scale(0.94);
        opacity:0;
        transition: transform 0.5s cubic-bezier(.2,.8,.2,1), opacity 0.5s ease;
      }
      #rs-lightbox.rs-lb-activo .rs-lb-marco{ transform:scale(1); opacity:1; }

      #rs-lightbox .rs-lb-img{
        max-width:88vw;
        max-height:74vh;
        width:auto; height:auto;
        object-fit:contain;
        border:1px solid rgba(180,148,80,0.4);
        box-shadow:0 30px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(180,148,80,0.12);
        background:#0a0a0a;
      }

      #rs-lightbox .rs-lb-pie{
        margin-top:18px;
        display:flex; align-items:center; gap:16px;
        font-family:'Space Mono', monospace;
        font-size:11px;
        letter-spacing:0.14em;
        text-transform:uppercase;
        color:#d4b87a;
      }
      #rs-lightbox .rs-lb-contador{ color:#9b968b; }

      #rs-lightbox .rs-lb-cerrar{
        position:absolute; top:24px; right:28px;
        width:42px; height:42px;
        border-radius:50%;
        border:1px solid rgba(245,240,231,0.3);
        background:rgba(0,0,0,0.3);
        color:#f5f0e7;
        font-size:16px;
        cursor:pointer;
        display:flex; align-items:center; justify-content:center;
        transition:all 0.3s ease;
        z-index:2;
      }
      #rs-lightbox .rs-lb-cerrar:hover{
        border-color:#d4b87a; color:#d4b87a; transform:rotate(90deg);
      }

      #rs-lightbox .rs-lb-nav{
        background:rgba(0,0,0,0.25);
        border:1px solid rgba(180,148,80,0.35);
        color:#f5f0e7;
        width:48px; height:48px;
        border-radius:50%;
        font-size:24px;
        line-height:1;
        cursor:pointer;
        display:flex; align-items:center; justify-content:center;
        transition:all 0.3s ease;
        flex-shrink:0;
        margin: 0 2vw;
        z-index:2;
      }
      #rs-lightbox .rs-lb-nav:hover{
        border-color:#e7cd8c; color:#e7cd8c;
        box-shadow:0 0 22px rgba(180,148,80,0.35);
      }

      @media(max-width:700px){
        #rs-lightbox .rs-lb-nav{ width:38px; height:38px; font-size:20px; }
        #rs-lightbox .rs-lb-cerrar{ top:14px; right:14px; width:36px; height:36px; }
      }
    `;
    document.head.appendChild(style);

    const imgEl = lb.querySelector('.rs-lb-img');
    const tagEl = lb.querySelector('.rs-lb-tag');
    const contadorEl = lb.querySelector('.rs-lb-contador');
    const btnCerrar = lb.querySelector('.rs-lb-cerrar');
    const btnPrev = lb.querySelector('.rs-lb-prev');
    const btnNext = lb.querySelector('.rs-lb-next');

    let indiceActual = 0;

    function mostrar(indice){
      indiceActual = (indice + piezas.length) % piezas.length;
      const pieza = piezas[indiceActual];
      const img = pieza.querySelector('img');
      const tag = pieza.querySelector('.tag');
      imgEl.src = img.src;
      imgEl.alt = img.alt || '';
      tagEl.textContent = tag ? tag.textContent : '';
      contadorEl.textContent = `${String(indiceActual+1).padStart(2,'0')} / ${String(piezas.length).padStart(2,'0')}`;
    }

    function abrir(indice){
      mostrar(indice);
      lb.classList.add('rs-lb-activo');
      document.body.style.overflow = 'hidden';
    }

    function cerrar(){
      lb.classList.remove('rs-lb-activo');
      document.body.style.overflow = '';
    }

    piezas.forEach((pieza, i) => {
      pieza.style.cursor = 'zoom-in';
      pieza.addEventListener('click', () => abrir(i));
    });

    btnCerrar.addEventListener('click', cerrar);
    btnPrev.addEventListener('click', (e) => { e.stopPropagation(); mostrar(indiceActual - 1); });
    btnNext.addEventListener('click', (e) => { e.stopPropagation(); mostrar(indiceActual + 1); });

    lb.addEventListener('click', (e) => {
      if(e.target === lb) cerrar();
    });

    document.addEventListener('keydown', (e) => {
      if(!lb.classList.contains('rs-lb-activo')) return;
      if(e.key === 'Escape') cerrar();
      if(e.key === 'ArrowRight') mostrar(indiceActual + 1);
      if(e.key === 'ArrowLeft') mostrar(indiceActual - 1);
    });
  });
})();