OPhotobox是欧阳博客自主实现的零依赖图片灯箱,使用原生 JavaScript 与 CSS,不包含或依赖第三方灯箱库代码。
版本
功能
- 自动增强文章中的裸图片和图片链接
- 默认仅在文章页和独立页面启用,可在后台切换为包括首页及归档列表的全站模式
- 按文章或全站组织相册
- 25%~600% 居中缩放,缩小、原始和放大状态均支持鼠标拖拽
- 移动端双指缩放和左右滑动切图
- 可配置幻灯片自动播放与播放间隔
- 深色、亮色或跟随系统主题
- 微博、QQ 空间、X / Twitter 和复制链接分享
- 键盘切图、播放、缩放、全屏和关闭
- 点击图片保持预览,点击图片外的遮罩区域关闭预览
- 对话框焦点管理、减少动态效果偏好和加载竞态保护
- 后台可配置循环切图、键盘、遮罩关闭、滚轮、双击、拖拽、界面元素和相邻图片预加载
- 后台设置按基础、相册导航、缩放交互、幻灯片、界面与信息五个标签页分类
使用
将 OPhotobox 目录放入 usr/plugins/,在 Typecho 后台启用并配置。启用前请停用其他图片灯箱插件,以免同一图片被重复包装。
插件生成的新标记使用独立属性:
<a href="photo.jpg" data-ophotobox="gallery-article-1" data-ophotobox-title="图片标题" data-ophotobox-description="图片描述">
<img src="photo.jpg" title="图片标题" alt="图片描述">
</a>
1.0.1 修复与优化
- 修复开启自动播放后未生效的问题
- 修复切换图片后分享链接仍指向第一张图片的问题
- 增加桌面端缩放后鼠标拖拽
- 恢复关闭前页面原有的内联滚动样式
- 避免快速切图时旧图片加载回调污染当前状态
- 支持单双引号属性、图片 URL 查询参数及 AVIF/SVG 格式
- 正确支持以空格分隔的多个忽略类名
- 避免包装已位于普通链接中的图片
- 加入焦点返回、焦点循环、ARIA、按钮类型和减少动态效果支持
- 底部信息优先读取 Typecho 附件后台的“标题”和“备注/描述”,按“标题 — 描述”显示;匹配不到附件时才回退到图片
title/alt