Image 图片预览

图片预览组件，给 img 加 data-preview 即可启用点击放大预览。支持分组翻页、滚轮/按钮缩放、旋转、键盘操作。

基础用法

  • Preview
  • Code
点击图片打开全屏预览。 
<img src="thumb.jpg" data-preview>

分组预览

  • Preview
  • Code
同一 data-preview-group 内的图片可翻页查看。 
<img src="a.jpg" data-preview data-preview-group="gallery">
<img src="b.jpg" data-preview data-preview-group="gallery">
<img src="c.jpg" data-preview data-preview-group="gallery">

指定大图地址

  • Preview
  • Code
缩略图与大图地址不同时，用 data-preview-src 指定大图。 
<img src="thumb.jpg"
     data-preview
     data-preview-src="full.jpg">

操作说明

  • Preview
  • Code
预览打开后可用操作：
  • ← / →：上一张 / 下一张
  • + / -：放大 / 缩小
  • 0：重置缩放
  • ESC：关闭
  • 鼠标滚轮：缩放
  • 鼠标拖拽：平移
// 键盘 / 鼠标操作无需额外配置

API

属性

属性说明
data-preview启用预览
data-preview-src大图地址（默认取 src）
data-preview-group分组名，同组可翻页