Как разрешить выполнение jQuery.lightBox () для div, который скрыт одним щелчком мыши? - PullRequest
Новая
       24

Как разрешить выполнение jQuery.lightBox () для div, который скрыт одним щелчком мыши?

0 голосов
/ 14 апреля 2011

Представьте, что 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 остается скрытым - поэтому, когда они нажимают«Нажмите меня», он автоматически переходит в lightBox (), но я не уверен, возможно ли это.

Я использую jQuery.LightBox - http://leandrovieira.com/projects/jquery/lightbox/

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

enter image description here

1 Ответ

1 голос
/ 14 апреля 2011 
$('#tour_gallery_link').click(function() {
    $("#tour_gallery a").lightbox({
        fitToScreen: true,
        imageClickClose: false
    }).parent().css('visibility', 'visible');
    $("#tour_gallery a:first").trigger('click');
});
...