为何升级至jBox 0.4.9后Image组件无法按文档正常工作？

我最近把jBox从2016年的旧版本升级到v0.4.9后，代码彻底跑不起来了，尤其是Image组件的表现异常离谱。

我照着Stephan的官方示例代码几乎原封不动地做了个测试（只加了几行完全不影响逻辑的CSS），结果还是没法正常触发Image组件的功能。想来想去，我觉得问题应该出在jBox本身，而不是我的代码。

测试用HTML代码 #

<a href="https://stephanwagner.me/img/jBox/demo-img/CIMG4778_large.jpg" title="My title 1" data-jbox-image="gallery1" class="demo-img1">
  <img src="https://stephanwagner.me/img/jBox/demo-img/CIMG4778_small.jpg" alt="">
</a>
<a href="https://stephanwagner.me/img/jBox/demo-img/CIMG4547_large.jpg" title="My title 2" data-jbox-image="gallery1" class="demo-img1">
  <img src="https://stephanwagner.me/img/jBox/demo-img/CIMG4547_small.jpg" alt="">
</a>

测试用JS代码 #

我试了两种初始化方式，全都没效果：

1. 直接初始化：

new jBox('Image');

2. 等DOM加载完再初始化：

$(function(){
  new jBox("Image");
});

几个可以试试的排查方向 #

• 先确认资源有没有引全：新版本的jBox可能对CSS和JS的依赖更严格，要是漏了CSS文件，组件可能根本渲染不出来，自然没法触发功能。
• 检查API是不是变了：毕竟隔了好几年，v0.4.9的API说不定和旧版本不一样了。比如试试显式指定要绑定的元素选择器：

new jBox('Image', {
  selector: '[data-jbox-image]'
});

• 看看控制台有没有报错：打开浏览器的开发者工具，切到控制台标签，有没有资源加载失败、变量未定义这类报错？这些信息能帮你快速定位问题。
• 直接用官网最新示例测试：把jBox官网的Image组件最新示例代码拿过来跑一遍，看看是不是自己的环境配置出了问题，而不是组件本身的Bug。

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