feat: 详情页图片改用本页灯箱,不再 window.open 弹新窗口
以前点图片会 window.open 弹一个新窗口,没有关闭按钮、来回切换很别扭。
现在把「海报 → 票根 → 观影照片」收进一个序列,点任一张在当前页弹出查看。
交互
- 左右箭头循环翻看,底部显示「3 / 8」进度与图片说明,✕ 关闭。
- 键盘 ← / → 翻页、Esc 关闭;点画面空白处关闭(点图片或按钮不关)。
- 移动端左右滑动切换;手机上箭头缩小并内收,给图片让出更多宽度。
- 弹出时给 <body> 加锁滚动;预取相邻两张,翻页不白屏。
- 只有一张图时不显示左右箭头;关闭后焦点回到原来点开的那张图。
- 英雄区海报也变成可点开(占序列首位);无真实海报时维持占位块不变。
实现
- 图片序列在页面顶部一次性组装,英雄区与图库共用同一套 data-lb-index 下标,
不再两处各算一遍;渲染与判断都统一走 storageExists / storageUrl。
- GALLERY 通过 json_encode 输出,带 JSON_HEX_TAG / HEX_AMP / HEX_APOS / HEX_QUOT,
避免豆瓣侧或文件名里的 </script> 截断脚本。
- 候选文本一律经 textContent / caption 写入,不拼 HTML。
两个实现坑(本批修掉)
- 作者样式 .lb-btn{display:flex} 优先级高于 UA 的 [hidden]{display:none},
单图时箭头实际隐藏不掉 —— 必须显式写 .lb-btn[hidden]{display:none}。
- 灯箱复用同一个 <img>,而 main.js 的破图兜底会给 <img> 打上
data-fallback-applied 后就不再处理;每次换图要 removeAttribute 重新武装,
否则只要有一张失败过,后续图片就不再有占位兜底。
验证
- php -l 通过;内联 JS/CSS 用「模拟 PHP 渲染」方式校验通过。
- 新增 lightbox_test.js(jsdom,对真实渲染出的详情页跑):38 项全通过,
覆盖打开/翻页/循环/键盘/Esc/点空白关闭/点图片不关/单图隐藏箭头/破图标记复位。
这两个坑正是它抓出来的(delete dataset.x 在 jsdom 下不生效,故改用 removeAttribute)。
- fetch_movie 端到端 76 项、storage 回归 196 项全通过。
- A/B 47 个响应:只有详情页(及会重定向到详情页的提交响应)6 个有差异,其余 41 个不变。
- 线上双 PHP(7.4/8.1)用真实数据渲染通过:4 张图序列、URL 为本站代理地址、
结构齐备、无 window.open。
(注:以 movie 身份跑 CLI 时 db/.settings.key 不可读,云端配置会被判为未完成、
所有图片都判成「不存在」;冒烟脚本改为向进程内缓存注入一份假配置绕过,
不写库、不碰真实密钥。这只影响探针,不影响以 www 运行的站点。)
This commit is contained in:
@@ -59,6 +59,9 @@
|
||||
- 导航为下拉菜单,自动高亮当前页;顶部始终显示当前用户头像与用户名。
|
||||
- **点导航栏左上角的「🎬 电影日志」即可回到首页**(右键 / Ctrl+点击还能在新标签页打开),不必再展开右侧折叠菜单去找「首页」。
|
||||
- 登录页为深色渐变 + 毛玻璃风格。
|
||||
- **详情页图片用本页灯箱查看**:海报、票根、观影照片串成一个序列,点任一张即在当前页弹出(不再 `window.open` 到新窗口),**左右箭头翻看并循环**,底部显示「3 / 8」进度与图片说明。
|
||||
可按 **← / →** 翻页、**Esc** 关闭、点画面空白处关闭,手机上还能**左右滑动**切换;弹出时锁定背景滚动,并从相邻位置预取下一张,翻页不白屏。
|
||||
只有一张图时不显示左右箭头;关闭后焦点会回到原来点开的那张图上。
|
||||
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user