DNN站点用DNNVista Bootstrap3主题时2sxc相册Fancy box点击加载报错咨询

1. 定位主题URL处理逻辑冲突 #

• 该款基于Bootstrap 3的DNNVista主题通常会自带自定义前端脚本，优先排查主题目录下的script.js、theme.js核心脚本文件，搜索是否存在针对<a>标签href属性的统一处理逻辑，尤其是针对.jpg/.png/.webp等图片后缀的截断规则，大概率是主题脚本误删除了2sxc生成的图片URL末尾的参数前导问号。
• 快速验证方法：右键查看页面原始HTML代码，如果相册图片链接的href属性在初始输出时就没有问号，说明是服务端渲染时主题逻辑修改了输出；如果初始输出带问号，页面加载完成后消失，则可确定是前端JS冲突导致。

2. 临时调试修复脚本 #

可先在页面底部加入以下JS代码，验证是否为URL截断问题，测试功能是否恢复：

$(document).ready(function() {
  // 补全相册图片链接缺失的问号和参数
  $('.2sxc-gallery-item a[href*=".jpg"],.2sxc-gallery-item a[href*=".png"],.2sxc-gallery-item a[href*=".webp"]').each(function() {
    let rawHref = $(this).attr('href');
    if (!rawHref.includes('?')) {
      // 可根据实际2sxc图片需要携带的参数调整后缀
      $(this).attr('href', rawHref + '?w=1200&mode=max');
    }
  });
});

3. 服务端逻辑排查 #

• 检查站点web.config的<rewrite>节点，确认是否有主题要求添加的静态资源重写规则，这类规则容易误截断2sxc动态图片URL的参数部分。
• 可直接修改2sxc Image Gallery的视图模板，给图片链接手动添加一个无用参数前缀（比如@ImageUrl?fix=1），避开主题的截断逻辑，无需修改主题核心代码即可完成兼容。

4. Fancybox配置兜底 #

如果以上方案都无法定位冲突点，可直接重写Fancybox的资源读取逻辑，不依赖href属性的完整值，直接从缩略图属性拼接大图地址：

$(".2sxc-gallery-item a").fancybox({
  type: 'image',
  src: function(instance, item) {
    // 按站点实际的缩略图/大图路径规则调整拼接逻辑即可
    return $(this).find('img').attr('src').replace('/thumb/', '/large/');
  }
});

内容的提问来源于stack exchange，提问作者Mladen Ivosevic