ライトボックス Lightbox

.demo-lightbox-gallery { position: relative;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
}
.demo-lightbox-thumb {
  cursor: pointer; border-radius: 8px; overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.demo-lightbox-thumb:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.demo-lightbox-placeholder {
  aspect-ratio: 4/3; display: flex; align-items: center;
  justify-content: center; font-size: 14px; color: #666;
  border-radius: 8px;
}
.demo-lightbox-overlay {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.9); z-index: 1000;
  display: flex; align-items: center; justify-content: center;
}
.demo-lightbox-close {
  position: absolute; top: 16px; right: 16px;
  background: none; border: none; color: #fff;
  font-size: 32px; cursor: pointer; z-index: 1001;
  width: 44px; height: 44px; display: flex;
  align-items: center; justify-content: center;
  border-radius: 50%; transition: background 0.2s;
}
.demo-lightbox-close:hover { background: rgba(255,255,255,0.1); }
.demo-lightbox-prev,
.demo-lightbox-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: #fff;
  font-size: 48px; cursor: pointer; padding: 16px;
  transition: color 0.2s;
}
.demo-lightbox-prev { left: 8px; }
.demo-lightbox-next { right: 8px; }
.demo-lightbox-prev:hover,
.demo-lightbox-next:hover { color: var(--ui-primary); }
.demo-lightbox-content {
  text-align: center; max-width: 80%; max-height: 80vh;
}
.demo-lightbox-display {
  width: 400px; max-width: 100%; aspect-ratio: 4/3;
  background: color-mix(in srgb, var(--ui-primary) 15%, #222);
  border-radius: 8px; display: flex; align-items: center;
  justify-content: center; color: #aaa; font-size: 18px;
}
.demo-lightbox-caption {
  color: #ccc; font-size: 14px; margin-top: 12px;
}
.demo-lightbox-counter {
  color: #888; font-size: 12px; margin-top: 4px;
}
@media (max-width: 767px) { .demo-lightbox-overlay { position: fixed !important; inset: 0 !important; z-index: 9999 !important; } }

(function(){
  const items = [
    { text: '\u{1F304} 風景写真 1', caption: '朝日が差し込む渓谷' },
    { text: '\u{1F305} 風景写真 2', caption: '夕焼けのビーチ' },
    { text: '\u{1F4F7} ポートレート', caption: 'スタジオ撮影' },
    { text: '\u{1F3C6} 建築', caption: 'モダン建築' }
  ];
  let current = 0;
  const overlay = document.querySelector('.demo-lightbox-overlay');
  const display = overlay.querySelector('.demo-lightbox-display');
  const caption = overlay.querySelector('.demo-lightbox-caption');
  const counter = overlay.querySelector('.demo-lightbox-counter');
  function show(i){
    current = i;
    display.textContent = items[i].text;
    caption.textContent = items[i].caption;
    counter.textContent = (i+1)+' / '+items.length;
    overlay.style.display = 'flex';
  }
  document.querySelectorAll('.demo-lightbox-thumb').forEach(t => {
    t.addEventListener('click', function(){ show(parseInt(this.dataset.index)); });
  });
  overlay.querySelector('.demo-lightbox-close').addEventListener('click', function(){ overlay.style.display='none'; });
  overlay.querySelector('.demo-lightbox-prev').addEventListener('click', function(){ show((current-1+items.length)%items.length); });
  overlay.querySelector('.demo-lightbox-next').addEventListener('click', function(){ show((current+1)%items.length); });
  overlay.addEventListener('click', function(e){ if(e.target===overlay) overlay.style.display='none'; });
})();