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');
});

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

1 个答案: