灯箱图片放大

<style>
#lbgs .thumbs { display: flex; gap: 12px; justify-content: center; padding: 20px 0; }
#lbgs .thumbs img { width: 110px; height: 74px; object-fit: cover; border-radius: 8px;
                    cursor: pointer; transition: transform .25s; }
#lbgs .thumbs img:hover { transform: scale(1.06); }
#lbMask { position: fixed; inset: 0; background: rgba(0,0,0,.85);
          display: flex; align-items: center; justify-content: center;
          opacity: 0; visibility: hidden; transition: .3s ease; }
#lbMask.show { opacity: 1; visibility: visible; }
#lbMask img { max-width: 80vw; max-height: 72vh; border-radius: 10px;
              transform: scale(.9); transition: .3s ease; }
#lbMask.show img { transform: scale(1); }
#lbMask .nav { position: fixed; color: #fff; font-size: 34px; cursor: pointer;
               top: 50%; transform: translateY(-50%); user-select: none; }
#lbMask .pv { left: 24px; } #lbMask .nx { right: 24px; }
</style>
<div id="lbgs"><div class="thumbs">
  <img src="https://picsum.photos/seed/a/640/400" alt="图1">
  <img src="https://picsum.photos/seed/b/640/400" alt="图2">
  <img src="https://picsum.photos/seed/c/640/400" alt="图3">
</div></div>
<div id="lbMask">
  <span class="nav pv">‹</span><img alt="预览"><span class="nav nx">›</span>
</div>
<script>
var mask = document.getElementById('lbMask'), big = mask.querySelector('img');
var imgs = document.querySelectorAll('#lbgs .thumbs img');
var idx = 0;
function show(i) {
  idx = (i + imgs.length) % imgs.length;
  big.src = imgs[idx].src.replace('/640/400', '/1200/750');
  mask.classList.add('show'); document.body.style.overflow = 'hidden';
}
function hide() { mask.classList.remove('show'); document.body.style.overflow = ''; }
imgs.forEach(function (im, i) { im.addEventListener('click', function () { show(i); }); });
mask.addEventListener('click', function (e) { if (e.target === mask) hide(); });
mask.querySelector('.pv').addEventListener('click', function (e) { e.stopPropagation(); show(idx - 1); });
mask.querySelector('.nx').addEventListener('click', function (e) { e.stopPropagation(); show(idx + 1); });
document.addEventListener('keydown', function (e) { if (e.key === 'Escape') hide(); });
</script>