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

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

我使用的是演示页面上显示的"Borderless“图片库：https://blueimp.github.io/Bootstrap-Image-Gallery/

我已经正确显示了缩略图，单击缩略图可以成功打开lightbox查看器。我还可以成功地浏览lightbox幻灯片。但是，我正在尝试找出如何以编程方式打开lightbox查看器。基本上我想做的是“启动图片库”按钮在演示网站上做的事情，但在页面加载(文档准备就绪)，而不是与按钮点击。我发现演示站点将以下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());
});

这确实会导致加载lightbox，但实际只显示集合中的第一个图像，并且尝试导航到下一个图像时显示控制台错误：

Uncaught TypeError: Cannot read property 'style' of undefined

我已经浏览了一段时间的文档，现在尝试了各种方法，但似乎无法以编程方式触发一个工作正常的lightbox图库。在这里做这件事最好的方法是什么？

Answer 1

这很简单。试试这个：

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