Components · Lightbox
下载

组件

Lightbox 灯箱

全屏图片灯箱；需 pivcss.min.js。

示例
<button type="button" class="pvs-btn pvs-btn--outline pvs-btn--sm" data-pvs-lightbox-open="demo-lightbox">打开灯箱</button>
<div class="pvs-lightbox" id="demo-lightbox">
  <div class="pvs-lightbox__backdrop">
  </div>
  <div class="pvs-lightbox__stage">
    <button type="button" class="pvs-close pvs-lightbox__close" data-pvs-lightbox-close aria-label="关闭">×</button>
    <img class="pvs-lightbox__img pvs-img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='260'%3E%3Crect fill='%23e2e8f0' width='100%25' height='100%25'/%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.3em' fill='%2364748b'%3E预览图%3C/text%3E%3C/svg%3E" alt="示例" />
  </div>
</div>

打开后焦点进入舞台；Tab 在舞台内循环；Esc 或关闭按钮回到触发器。

示例
<button type="button" class="pvs-btn pvs-btn--outline pvs-btn--sm" data-pvs-lightbox-open="demo-lightbox-kb">键盘灯箱</button>
<div class="pvs-lightbox" id="demo-lightbox-kb">
  <div class="pvs-lightbox__backdrop">
  </div>
  <div class="pvs-lightbox__stage">
    <button type="button" class="pvs-close pvs-lightbox__close" data-pvs-lightbox-close aria-label="关闭">×</button>
    <img class="pvs-lightbox__img pvs-img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='260'%3E%3Crect fill='%23e2e8f0' width='100%25' height='100%25'/%3E%3C/svg%3E" alt="示例" />
  </div>
</div>

data-pvs-lightbox-gallery 绑定灯箱 id；缩略图用 data-pvs-lightbox-thumb + data-pvs-lightbox-src。

<div class="pvs-lightbox-gallery" data-pvs-lightbox-gallery="demo-gallery-lb">
  <button type="button" class="pvs-lightbox-gallery__thumb is-active" data-pvs-lightbox-thumb data-pvs-lightbox-src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='420'%3E%3Crect fill='%232563eb' width='100%25' height='100%25'/%3E%3Ctext x='50%25' y='50%25' fill='white' font-size='28' text-anchor='middle'%3E1%3C/text%3E%3C/svg%3E" data-pvs-lightbox-alt="图 1">
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Crect fill='%232563eb' width='100%25' height='100%25'/%3E%3C/svg%3E" alt="" />
  </button>
  <button type="button" class="pvs-lightbox-gallery__thumb" data-pvs-lightbox-thumb data-pvs-lightbox-src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='420'%3E%3Crect fill='%23059669' width='100%25' height='100%25'/%3E%3Ctext x='50%25' y='50%25' fill='white' font-size='28' text-anchor='middle'%3E2%3C/text%3E%3C/svg%3E" data-pvs-lightbox-alt="图 2">
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Crect fill='%23059669' width='100%25' height='100%25'/%3E%3C/svg%3E" alt="" />
  </button>
</div>
<div class="pvs-lightbox" id="demo-gallery-lb">
  <div class="pvs-lightbox__backdrop">
  </div>
  <div class="pvs-lightbox__stage">
    <button type="button" class="pvs-lightbox__nav pvs-lightbox__nav--prev" data-pvs-lightbox-prev aria-label="上一张">‹</button>
    <button type="button" class="pvs-close pvs-lightbox__close" data-pvs-lightbox-close aria-label="关闭">×</button>
    <img class="pvs-lightbox__img pvs-img" src="" alt="" />
    <button type="button" class="pvs-lightbox__nav pvs-lightbox__nav--next" data-pvs-lightbox-next aria-label="下一张">›</button>
  </div>
</div>
类名说明
data-pvs-lightbox-open值为灯箱 id
data-pvs-lightbox-close关闭按钮
data-pvs-lightbox-gallery缩略图组 → 灯箱 id
data-pvs-lightbox-thumb画廊缩略图触发
Lightbox 键盘Tab 陷阱 · Esc 回触发器
类名说明
pvs-lightbox根（默认隐藏）
pvs-lightbox__backdrop遮罩，点击关闭
pvs-lightbox__stage居中舞台
pvs-lightbox__img图片
pvs-lightbox-gallery缩略图画廊
pvs-lightbox__nav--prev / --next画廊切换
body.pvs-lightbox-open打开时锁滚动