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

Question

I'm using Blueimp Bootstrap-Image-Gallery:
https://github.com/blueimp/Bootstrap-Image-Gallery/blob/master/README.md

Which is an extension of Blueimp Gallery: https://github.com/blueimp/Gallery/blob/master/README.md

And I'm using the "Borderless" image gallery as shown on the demo page: https://blueimp.github.io/Bootstrap-Image-Gallery/

I have the thumbnails displaying properly, and clicking on a thumbnail opens the lightbox viewer succesfully. I can also navigate through the lightbox slides succesfully. But, I'm trying to figure out how to programmatically open the lightbox viewer. Basically I want to do what the "Launch Image Gallery" button does on the demo site, but do it on page load (document ready) rather than with a button click. I found that the demo site attaches the following jquery to the "Launch Image Gallery" button:

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

So I tried on my site:

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

And that does cause a lightbox to load, but only the first image in the set actually displays, and trying to navigate to the next image shows a console error:

Uncaught TypeError: Cannot read property 'style' of undefined

I've been going through the docs for a while now trying various things but can't seem to programmatically trigger a lightbox gallery that works properly. What is the best way to do this here?

Answer 1

It's simple. Try this:

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