图片灯箱（glightbox）

采用 GLightbox 3.3.0 制作的帖子图片灯箱插件：点击帖子正文或回复中的图片即可全屏浏览，并支持手机左右滑动切换。

功能

• 点击帖子正文（.detail-body）、回复内容（.reply-content）中的图片全屏浏览；
• 同一容器内的图片自动成组，可左右切换上一张 / 下一张；
• 手机端支持左右滑动切换、双指缩放；
• 支持键盘方向键切换、Esc 关闭、循环浏览；
• 自动排除表情、图标、验证码、付费锁定图库等小图；
• 事件委托方式绑定，兼容社区 PJAX 局部刷新与动态插入的图片；
• 修复因系统样式 html、body { height: 100% } 造成的点击图片后自动返回顶部的问题。

安装方法

1. 右键选中下载的压缩文件，解压到当前文件夹；
2. 把插件目录（本插件目录名为 glightbox，部分发行包名为 fox_glightbox）上传到你网站的 /plugin/ 目录内；
3. 登录网站后台，点击「插件」，找到「图片灯箱」并点击安装；
4. 安装完成后，点击后台菜单栏的「其它」，清空后台缓存即可。

如果插件目录名不是 glightbox，请将目录名改为 glightbox 后再安装，以保证插件类与静态资源路径正确。

注意事项

如果是在线解压，请记得给插件目录 755 权限，文件 644 权限。

配置项

后台「插件 → 图片灯箱 → 设置」中可配置：

跳顶问题修复说明

部分主题设置了：

html, body { height: 100%; }

GLightbox 打开时会为 html 和 body 同时添加 .glightbox-open { overflow: hidden; }。

当 html 高度被固定为视口高度且溢出被隐藏后，文档高度坍缩，浏览器会将 scrollTop 钳制为 0，于是出现「点击图片后页面自动返回顶部」。

本插件通过两层机制修复：

1. static/glightbox/glightbox-init.css 在灯箱打开期间强制：

  ```css

  html.glightbox-open,

  html.glightbox-open body {

      height: auto !important;

  }

  ```

  保留文档原有滚动高度；

1. static/glightbox/glightbox-init.js 在点击图片时记录 scrollY，并在灯箱打开、关闭后多次校验与恢复滚动位置，兼容动画与页面重排的时序差异。

目录结构

glightbox/
├── plugin.json
├── GlightboxPlugin.php
├── README.md
├── icon.svg
└── static/
    └── glightbox/
        ├── glightbox.min.js      # GLightbox 3.3.0
        ├── glightbox.min.css     # GLightbox 3.3.0
        ├── glightbox-init.js     # 插件初始化 / 事件委托 / 滚动位置修复
        └── glightbox-init.css    # 跳顶修复与图片样式

安装插件时，static/ 下的文件会同步复制到 public/static/glightbox/，前台实际引用路径为 /static/glightbox/glightbox/... 与 /static/glightbox/glightbox-init.*。