如何使用Chocolat jQuery插件在容器中默认显示首张图片

我来帮你搞定这个问题！你已经正确配置了容器和其他核心选项，现在只需要添加自动打开灯箱的触发逻辑就行——Chocolat默认初始化后不会自动弹出灯箱，需要手动调用它的API方法来实现预期效果。

解决方案步骤： #

1. 保存Chocolat初始化后的实例对象，这样才能调用它的open()方法
2. 在页面加载完成后，调用实例的open(index)方法，传入0作为索引（对应首张图片）

修改后的完整代码： #

<script type="text/javascript" src="dist/js/chocolat.js"> </script>
<link rel="stylesheet" href="dist/css/chocolat.css" type="text/css" media="screen" >
<body>
<div id="example3">
<a class="chocolat-image" href="series/1.jpg" title="caption image 1">
<img width="100" src="series/mini/1.jpg" />
</a>
<a class="chocolat-image" href="series/2.jpg" title="caption image 2">
<img width="100" src="series/mini/2.jpg" />
</a>
<a class="chocolat-image" href="series/3.jpg" title="caption image 3">
<img width="100" src="series/mini/3.jpg"/>
</a>
</div>
<div id="container2" style="width: 100%; max-width:1000px; height: 100%; max-height: 1000px; background: #E0E0E0;"></div>
</body>
<script>
// 保存Chocolat实例
const chocolatInstance = Chocolat(document.querySelectorAll('#example3 .chocolat-image'), {
    container: document.querySelector('#container2'),
    imageSize: 'contain',
    loop: true,
    allowZoom: false,
})

// 页面加载完成后自动打开首张图片
document.addEventListener('DOMContentLoaded', function() {
    chocolatInstance.open(0); // 0对应第一张图片的索引
});
</script>

关键说明： #

• Chocolat()函数会返回一个实例对象，我们需要保存它才能调用后续的API方法
• open(index)方法用于手动打开灯箱，index参数是图片的序号（从0开始计数），传入0就会默认显示第一张图
• 用DOMContentLoaded事件确保页面元素都加载完成后再触发灯箱打开，避免出现元素未就绪的问题

这样修改后，页面加载完成时就会自动在你指定的#container2容器中打开灯箱并显示首张图片啦！

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