本文提供一套无需手动修改每张图片 url 的自动化方案，通过 javascript 动态识别并替换 wordpress 缩略图路径为原始大图路径，并集成 magnific popup 实现点击即开高清灯箱效果。
在 Divi 等基于 WordPress 的网站中，文本模块内嵌入的图片通常使用缩略图尺寸（如 myimage-235x300.jpg），其 <img> 标签的 src 指向的是裁剪/压缩后的版本。但用户点击时希望看到的是未经缩放的原始大图（如 myimage.jpg 或 myimage-1.jpg）。由于站点图片数量庞大，逐一手动修改 src 不现实——我们需要自动化识别缩略图命名规律，并实时替换为对应原图 URL，再交由 Magnific Popup 渲染高清灯箱。
✅ 核心思路：URL 智能解析 + 动态替换
WordPress 默认生成的缩略图 URL 通常包含形如 -数字x数字 的尺寸后缀（如 -235x300），而原始图则无此后缀，或仅带 -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+x\d+/g.test(part));
return cleanParts.join('-') + extension;
}该函数能正确处理以下三种常见情况：
- https://mydomain/.../myimage-235x300.jpg → https://mydomain/.../myimage.jpg
- https://mydomain/.../myimage-1-235x300.jpg → https://mydomain/.../myimage-1.jpg
- https://mydomain/.../myimage-235x300-1.jpg → https://mydomain/.../myimage-1.jpg（注意：若 -1 在尺寸后，仍会被保留）
⚠️ 注意：确保你的服务器实际存在对应的大图文件（WordPress 默认会保留原始上传文件），否则灯箱将加载失败。
✅ 集成 Magnific Popup：动态绑定链接与弹窗
原 jQuery 代码直接包裹 <img> 为 <a>，但未更新 href。我们改用 “不修改 DOM 结构，仅动态设置 href” 的轻量方式，避免重复包裹或 HTML 污染：
<!-- 页面底部或 Divi 主题选项 → 自定义 CSS/JS 中添加 -->
<script>
jQuery(document).ready(function($) {
// 步骤 1：为所有目标图片动态添加 data-large-src 属性（仅执行一次）
$('.dmpro_timeline_item_description img.size-medium').each(function() {
const $img = $(this);
const currentSrc = $img.attr('src');
const largeSrc = thumbnailToLarge(currentSrc);
// 缓存大图地址，避免重复计算
$img.data('large-src', largeSrc);
});
// 步骤 2：初始化 Magnific Popup，委托给 img 标签（非 a 标签）
$('.dmpro_timeline_item_description').magnificPopup({
delegate: 'img.size-medium',
type: 'image',
closeOnContentClick: true,
closeBtnInside: false,
mainClass: 'mfp-no-margins mfp-with-zoom',
gallery: { enabled: false },
zoom: { enabled: true, duration: 200 },
// 关键：动态返回大图 URL 作为 lightbox 内容源
image: {
markup: '<div class="mfp-figure">' +
'<div class="mfp-close"></div>' +
'<figure>' +
'<div class="mfp-img"></div>' +
'<figcaption class="mfp-bottom-bar">' +
'<div class="mfp-title"></div>' +
'</figcaption>' +
'</figure>' +
'</div>',
cursor: 'mfp-zoom-out-cur',
titleSrc: function(item) {
return item.el.data('large-src') || item.el.attr('src');
}
},
// 覆盖默认内容加载逻辑：强制使用 data-large-src
callbacks: {
elementParse: function(item) {
item.src = item.el.data('large-src') || item.el.attr('src');
item.title = item.el.next('em').text() || '';
}
}
});
});
</script>✅ 优势说明：
- 零侵入 DOM：不改动原有 <img> 结构，不插入额外 <a> 标签，兼容 Divi 原生样式与响应式；
- 智能缓存：首次遍历时即解析并缓存大图 URL 到 data-large-src，后续调用无需重复正则运算；
- 标题支持：自动提取 <em> 标签内容作为灯箱标题（可选）；
- 降级安全：若 thumbnailToLarge() 返回空，回退至原 src，确保基础功能可用。
✅ 最终验证与部署建议
- 测试 URL 解析：在浏览器控制台运行 thumbnailToLarge("your-test-url.jpg")，确认输出符合预期；
- 检查网络请求：点击图片后，在 DevTools → Network 标签中确认灯箱加载的是 myimage.jpg 而非 myimage-235x300.jpg；
- Divi 部署位置：将完整 <script> 放入 Divi → 主题选项 → Integration → Add code to the < head > of your blog（推荐）或页脚 JS 区域；
- 性能提示：如页面图片极多（>500），可添加节流逻辑或改用 IntersectionObserver 懒解析，但对普通站点非必需。
通过以上方案，你无需触碰任何一张图片的 HTML，即可让数百张缩略图一键升级为高清灯箱体验——简洁、可靠、可维护，真正实现「一次配置，全局生效」。
