CODEWITHSUNDEEP
jqueryjquery-pluginslightbox
marcamillion
marcamillion

Reputation: 33755

How do I let a jQuery.lightBox() be executed on a div that is hidden with one click?

Imagine the HTML is like this:

<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>

The CSS:

#tour_gallery {
visibility: hidden;
}

The 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();
});

Basically what I want is when the user clicks the #tour_gallery_link, the div#tour_gallery will have it's CSS visibility changed to visible. Then #tour_gallery a will have the function lightBox() executed on it.

That's a very important distinction, the lightBox() has to be executed on the a links within the div#tour_gallery not just on the #tour_gallery itself.

However, the div#tour_gallery is what is hidden.

It would be nice if I could have the lightbox executed, while the div remains hidden - so once they press 'Click Me', it automatically jumps into the lightBox(), but I am not sure if that is possible.

I am using the jQuery.LightBox - http://leandrovieira.com/projects/jquery/lightbox/

Edit1: After I did the changes suggested by Calum, this is how the JSFiddle looks on my screen. It doesn't launch into the lightbox. It simply loads the div right below the Click Me.

enter image description here

Upvotes: 0

Views: 803

Answers (1)

Calum
Calum

Reputation: 5316

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

Upvotes: 1

Related Questions