javascript - Blueimp Bootstrap-Image-Gallery 在页面加载时直接初始化为灯箱/以编程方式打开灯箱

Question

我正在使用 Blueimp Bootstrap-Image-Gallery:
https://github.com/blueimp/Bootstrap-Image-Gallery/blob/master/README.md

这是 Blueimp Gallery 的扩展:https://github.com/blueimp/Gallery/blob/master/README.md

我正在使用“无边界”图像库，如演示页面所示:https://blueimp.github.io/Bootstrap-Image-Gallery/

我的缩略图可以正确显示，并且单击缩略图可以成功打开灯箱查看器。我还可以成功地浏览灯箱幻灯片。但是，我试图弄清楚如何以编程方式打开灯箱查看器。基本上我想做演示网站上“启动图片库”按钮的操作，但在页面加载(文档准备就绪)时执行，而不是单击按钮。我发现演示站点将以下 jquery 附加到“启动图片库”按钮:

$('#image-gallery-button').on('click', function (event) {
  event.preventDefault();
  blueimp.Gallery($('#links a'), $('#blueimp-gallery').data());
});

所以我在我的网站上尝试了:

$(document).ready(function(){
  blueimp.Gallery($('#links a'), $('#blueimp-gallery').data());
});

这确实会导致加载灯箱，但实际上仅显示该集中的第一个图像，并且尝试导航到下一个图像会显示控制台错误:

Uncaught TypeError: Cannot read property 'style' of undefined

我已经阅读文档有一段时间了，现在正在尝试各种事情，但似乎无法以编程方式触发正常工作的灯箱画廊。在这里执行此操作的最佳方法是什么？

Answer 1

很简单。 试试这个:

$(document).ready(function(){
  $('#links a:first').trigger('click');
});