如何在点击时自动加载原始尺寸图像并用 Magnific Popup 打开灯箱

本文提供一套无需手动修改每张图片 url 的自动化方案，通过 javascript 动态识别并替换 wordpress 缩略图路径为原始大图路径，并集成 magnific popup 实现点击即开高清灯箱效果。

在 Divi 等基于 wordPress 的网站中，文本模块内嵌入的图片通常使用缩略图尺寸（如 myimage-235×300.jpg），其 标签的 src 指向的是裁剪/压缩后的版本。但用户点击时希望看到的是未经缩放的原始大图（如 myimage.jpg 或 myimage-1.jpg）。由于站点图片数量庞大，逐一手动修改 src 不现实——我们需要自动化识别缩略图命名规律，并实时替换为对应原图 URL，再交由 Magnific Popup 渲染高清灯箱。

✅ 核心思路：URL 智能解析 + 动态替换

wordpress 默认生成的缩略图 URL 通常包含形如 -数字x数字 的尺寸后缀（如 -235×300），而原始图则无此后缀，或仅带 -1、-2 等序号。我们可利用这一规律编写健壮的字符串处理函数：

function thumbnailToLarge(src) {     if (!src || typeof src !== 'string') return src;      const dotIndex = src.lastIndexOf('.');     if (dotIndex === -1) return src;      const basename = src.substring(0, dotIndex);     const extension = src.substring(dotIndex);      // 分割 basename，过滤掉含 "NxM" 格式的片段（如 '235x300'）     const parts = basename.split('-');     const cleanParts = parts.filter(part => !/d+xd+/g.test(part));      return cleanParts.join('-') + extension; }

该函数能正确处理以下三种常见情况：

• https://mydomain/…/myimage-235×300.jpg → https://mydomain/…/myimage.jpg
• https://mydomain/…/myimage-1-235×300.jpg → https://mydomain/…/myimage-1.jpg
• https://mydomain/…/myimage-235×300-1.jpg → https://mydomain/…/myimage-1.jpg（注意：若 -1 在尺寸后，仍会被保留）

⚠️ 注意：确保你的服务器实际存在对应的大图文件（WordPress 默认会保留原始上传文件），否则灯箱将加载失败。

✅ 集成 Magnific Popup：动态绑定链接与弹窗

原 jquery 代码直接包裹 为 ，但未更新 href。我们改用 “不修改 DOM 结构，仅动态设置 href” 的轻量方式，避免重复包裹或 HTML 污染：

✅ 优势说明：

• 零侵入 DOM：不改动原有 结构，不插入额外 标签，兼容 Divi 原生样式与响应式；
• 智能缓存：首次遍历时即解析并缓存大图 URL 到 data-large-src，后续调用无需重复正则运算；
• 标题支持：自动提取 标签内容作为灯箱标题（可选）；
• 降级安全：若 thumbnailToLarge() 返回空，回退至原 src，确保基础功能可用。

✅ 最终验证与部署建议

1. 测试 URL 解析：在浏览器控制台运行 thumbnailToLarge(“your-test-url.jpg”)，确认输出符合预期；
2. 检查网络请求：点击图片后，在 DevTools → Network 标签中确认灯箱加载的是 myimage.jpg 而非 myimage-235×300.jpg；
3. Divi 部署位置：将完整
4. 性能提示：如页面图片极多（>500），可添加节流逻辑或改用 IntersectionObserver 懒解析，但对普通站点非必需。

通过以上方案，你无需触碰任何一张图片的 html，即可让数百张缩略图一键升级为高清灯箱体验——简洁、可靠、可维护，真正实现「一次配置，全局生效」。