feat(lightbox): 正文图片点击在当前页放大、多图轮播、键盘切换
新增主题自带的图片灯箱,替代「点图片跳新标签页」的旧行为, 不再依赖第三方灯箱插件。 主要能力 · 正文里的图片链接改写成「在当前页覆盖展示原图」,不跳转 · 原图优先按附件 ID 取 full size(wp_get_attachment_image_src), 取不到才退回 href 自己 —— 不在前端从缩略图文件名反推原图地址 · 原图地址写在 href 里而不是 data-full:主题的 CDN 是整页输出缓冲 改写,只认 src= / href= 与 CSS url(),写 data-* 会绕回源站 · 多图左右箭头轮播(到头循环),键盘 ←↑ / →↓ 切换、Esc 关闭、 Home / End 跳首尾,点空白关闭,打开时锁滚动并在关闭后归还焦点 · 两套遮罩配色(白色默认 / 深色)与九档不透明度(默认 80%) · 图片本身始终保持不透明:透明度只作用在遮罩底色上 兼容性处理 · 剥掉第三方灯箱插件留下的触发属性(data-rel / data-imagelightbox / data-rl_title 等)。线上实测 100 篇文章 112 张图**全部**带这些属性, 若只「让给插件」则主题灯箱永不生效;同时关掉开关时一律不动, 插件可照常工作 · 移除 imgnofollow() 给图片链接加的 target="_blank" 与 rel, 链接不再承担跳转职责 · 无 JS 时 href 仍在,右键「在新标签页打开图片」照常可用 可读性 · 半透明遮罩下底部说明条自带更实的底(≥0.9),并按「遮罩底下是 纯黑」的最坏情况验证文字对比度 ≥ 4.5:1 · 行内不透明度样式用 [data-theme] 选择器,避免被样式表默认值压掉 (裸类名优先级不足,会让深色配色下透明度静默失效) 验证 · 服务端正文改写探针 51 通过 / 0 失败(PHP 8.4 与 8.5) · 浏览器真实交互探针 200 通过 / 0 失败(两配色 × 80%,含 50%/100%) · 上述两者的反向验证 21 项注入全部按预期捕获 · 三个改动文件 php -l 通过 Refs #10
This commit is contained in:
@@ -1054,6 +1054,93 @@ function kratos_options()
|
||||
'type' => 'info',
|
||||
);
|
||||
|
||||
/* ══════════════════════════════════════════════════════════
|
||||
* 十二、图片灯箱 —— 正文图片点击在当前页放大
|
||||
*
|
||||
* 放在 CDN 之后:灯箱里加载的原图地址会被 CDN 一起改写,
|
||||
* 两者是相关的,放近一点方便对照着调。
|
||||
*
|
||||
* ⚠️ 这里的 std 必须与 inc/theme-lightbox.php 的运行时默认值一致
|
||||
* (yang_lightbox_active() / yang_lightbox_theme())。
|
||||
* `std` 只服务「后台预填」和「恢复默认」,**运行时完全不读**;
|
||||
* 两处不一致会出现「后台看着勾上了、前台却没生效」。
|
||||
* ══════════════════════════════════════════════════════════ */
|
||||
$options[] = array(
|
||||
'name' => __('图片灯箱', 'kratos'),
|
||||
'type' => 'heading',
|
||||
);
|
||||
|
||||
$options[] = array(
|
||||
'name' => __('启用图片灯箱', 'kratos'),
|
||||
'desc' => __('点击正文里的图片,<b>在当前页面</b>覆盖展示原图,不再跳新标签页。'
|
||||
. '一篇文章有多张图时可以左右切换,也支持键盘方向键。'
|
||||
. '<br><b>说明:</b>这些图在正文里通常是缩略图,点开后加载的是<b>原图</b>;'
|
||||
. '若开启了 CDN 加速,原图地址同样走 CDN。'
|
||||
. '<br>关掉则完全退回原有行为(点击在新标签页打开图片)。', 'kratos'),
|
||||
'std' => '1',
|
||||
'id' => 'a_lightbox_enable',
|
||||
'type' => 'checkbox',
|
||||
);
|
||||
|
||||
/* 遮罩配色的两个单选项
|
||||
*
|
||||
* 用户先要「黑底也行、不黑也行」,看了两套演示后明确选了**白色**,
|
||||
* 所以 std 从 dark 改成 light。深色仍然保留:看照片时它更合适
|
||||
* (周围全黑对颜色判断干扰最小),换站/换内容时可能需要。
|
||||
* 说明文字里写清各自适合什么图,避免用户反复切换试错。 */
|
||||
$options[] = array(
|
||||
'name' => __('遮罩配色', 'kratos'),
|
||||
'desc' => __('<b>白色</b>(默认)适合以截图、文档、白底图为主的内容,'
|
||||
. '不会让白底图的边缘发灰。'
|
||||
. '<br><b>深色</b>适合看照片:周围全黑时对图里颜色的判断更准。', 'kratos'),
|
||||
'std' => 'light',
|
||||
'id' => 'a_lightbox_theme',
|
||||
'type' => 'radio',
|
||||
'options' => array(
|
||||
'light' => __('白色遮罩(浅底,看截图与文档)', 'kratos'),
|
||||
'dark' => __('深色遮罩(黑底,看照片)', 'kratos'),
|
||||
),
|
||||
/* 只有灯箱开着时才有意义;关着的时候藏起来,
|
||||
避免用户改了配色却不知道为什么没变化。 */
|
||||
'requires' => 'a_lightbox_enable',
|
||||
);
|
||||
|
||||
/* 遮罩不透明度
|
||||
*
|
||||
* 用户要求「不一定要把内容全盖住一点都看不见,只突出这张照片就行,
|
||||
* 透明度 80% 左右」。做成可调而不是写死 80:
|
||||
* · 各人屏幕亮度不同,80 在别人站上可能偏透或偏实;
|
||||
* · 以后想临时更实一点(确认底下文字)或更透一点,
|
||||
* 改一个数字就行,不用等主题更新。
|
||||
*
|
||||
* ⚠️ 用 select 而不是文本输入:文本输入让用户自己敲数字,
|
||||
* 敲出 0 或 300 都是灾难(0 = 完全看不见遮罩,300 = 非法值)。
|
||||
* 给固定的几档,每个档都验证过可读性。 */
|
||||
$options[] = array(
|
||||
'name' => __('遮罩不透明度', 'kratos'),
|
||||
'desc' => __('数值越小,底下正文透出来越多 —— 能看出自己还停在哪一页,'
|
||||
. '但正文也越容易干扰看图的注意力。'
|
||||
. '<br><b>80%(默认)</b>是「隐约可见、照片仍是主角」的平衡点。'
|
||||
. '低于 70% 时请在深色图片较多的页面上确认一下底部文字是否还看得清。'
|
||||
. '<br><b>说明:</b>这里改的是<b>遮罩底色</b>的透明度,'
|
||||
. '照片本身不会被弄淡。', 'kratos'),
|
||||
'std' => '80',
|
||||
'id' => 'a_lightbox_opacity',
|
||||
'type' => 'select',
|
||||
'options' => array(
|
||||
'100' => __('100% —— 完全盖住(不透)', 'kratos'),
|
||||
'95' => __('95% —— 几乎不透明', 'kratos'),
|
||||
'90' => __('90% —— 很实', 'kratos'),
|
||||
'85' => __('85%', 'kratos'),
|
||||
'80' => __('80% —— 默认,隐约可见', 'kratos'),
|
||||
'75' => __('75%', 'kratos'),
|
||||
'70' => __('70% —— 能明显看到底下', 'kratos'),
|
||||
'60' => __('60% —— 偏透', 'kratos'),
|
||||
'50' => __('50% —— 最透(下限)', 'kratos'),
|
||||
),
|
||||
'requires' => 'a_lightbox_enable',
|
||||
);
|
||||
|
||||
/* ══════════════════════════════════════════════════════════
|
||||
* 十三、自定义代码 —— 兜底用,放最后
|
||||
*
|
||||
|
||||
Reference in New Issue
Block a user