Блог

Представьте, что 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 его CSS visibility менялся на visible . Тогда для него #tour_gallery a будет выполнена функция lightBox() .

Это очень важное различие, lightBox() должно выполняться для a ссылок внутри div#tour_gallery , а не только для #tour_gallery самого.

Однако div#tour_gallery это то, что скрыто.

Было бы неплохо, если бы я мог запустить лайтбокс, в то время как div остается скрытым — поэтому, как только они нажимают «Click Me», он автоматически переходит в lightBox (), но я не уверен, возможно ли это.

Я использую jQuery.ЛайтбОкс — http://leandrovieira.com/projects/jquery/lightbox /

Правка 1: После того, как я внес изменения, предложенные Калумом, вот как JSFiddle выглядит на моем экране. Он не запускается в лайтбоксе. Он просто загружает div справа под кнопкой Click Me.

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