kjweiji/assets/js/lightbox.js

/**
 * 空笺未寄 — Lightbox
 * Adapted from DeepSeek UI
 */
(function () {
  const lb = document.getElementById('lightbox');
  if (!lb) return;

  const lbImg = document.getElementById('lightbox-img');
  const lbCaption = document.getElementById('lightbox-caption');
  const lbCounter = document.getElementById('lightbox-counter');
  const lbClose = lb.querySelector('.lightbox-close');
  const lbPrev = lb.querySelector('.lightbox-prev');
  const lbNext = lb.querySelector('.lightbox-next');

  let images = [];
  let index = 0;

  function show(i) {
    index = i;
    const item = images[index];
    if (!item) return;
    lbImg.src = item.src || '';
    lbCaption.textContent = item.caption || '';
    lbCounter.textContent = images.length > 1
      ? `${index + 1} / ${images.length}`
      : '';
  }

  function open(items, startIndex) {
    images = items;
    show(startIndex || 0);
    lb.classList.add('active');
    document.body.style.overflow = 'hidden';
  }

  function close() {
    lb.classList.remove('active');
    document.body.style.overflow = '';
  }

  function next() {
    show((index + 1) % images.length);
  }

  function prev() {
    show((index - 1 + images.length) % images.length);
  }

  // Click handlers
  lbClose.addEventListener('click', close);
  lbPrev.addEventListener('click', (e) => { e.stopPropagation(); prev(); });
  lbNext.addEventListener('click', (e) => { e.stopPropagation(); next(); });

  // Click outside to close
  lb.addEventListener('click', function (e) {
    if (e.target === lb) close();
  });

  // Keyboard navigation
  document.addEventListener('keydown', function (e) {
    if (!lb.classList.contains('active')) return;
    if (e.key === 'ArrowLeft') prev();
    if (e.key === 'ArrowRight') next();
    if (e.key === 'Escape') close();
  });

  // Expose
  window.kjwejiLightbox = { open, close, next, prev };
})();