如何在一次隐藏的div上执行jQuery.lightBox（）？

Question

想象一下HTML是这样的：

<a id="tour_gallery_link" href="#">Click Me</a>

<div id="tour_gallery">
    <a href="image1.png"><img src="image1.png"></a>
    <a href="image2.png"><img src="image2.png"></a>
    <a href="image3.png"><img src="image3.png"></a>
</div>

CSS：

#tour_gallery {
visibility: hidden;
}

jQuery：

$(document).ready(function(){
    console.debug("Page DOM ready");
    $('#tour_gallery_link').click(function() {
    console.debug("Clicked the tour gallery link.");
    $('#tour_gallery').css({
        visibility: 'visible'
    }).lightBox();
});

基本上我想要的是当用户点击#tour_gallery_link时，div#tour_gallery会将其visibility更改为visible。然后#tour_gallery a将执行函数lightBox()。

这是一个非常重要的区别，lightBox()必须在a内的div#tour_gallery链接上执行，而不仅仅在#tour_gallery本身上执行。

但是，div#tour_gallery是隐藏的内容。

如果我可以执行灯箱会很好，而div仍然是隐藏的 - 所以一旦他们按下“Click Me”，它会自动跳转到lightBox（），但我不确定这是否可行。< / p>

我正在使用jQuery.LightBox - http://leandrovieira.com/projects/jquery/lightbox/

Edit1：在我完成了Calum建议的更改之后，这就是JSFiddle在我的屏幕上的样子。它不会启动进入灯箱。它只是在Click Me下面加载div。

Answer 1

$('#tour_gallery_link').click(function() {
    $("#tour_gallery a").lightbox({
        fitToScreen: true,
        imageClickClose: false
    }).parent().css('visibility', 'visible');
    $("#tour_gallery a:first").trigger('click');
});