How can I close the fancybox by clicking on my page without using overlay:true

Question

How can I close the fancybox http://fancyapps.com/fancybox/ when I click outside the fancybox content. I could use overlay :true, but I want to still be able to click on another image while fancybox is open.

I tried this code but it cancel fancybox to open at all.

$(document).click(function() {
    $.fancybox.close()
});

Check http://stackoverflow.com/a/8404587/1055987 – JFK Aug 30 '12 at 18:52 — JFK, Aug 30 '12 at 18:52

score 0 · Answer 1 · answered Aug 30 '12 at 19:01

This may not be an elegant solution, but will work ..

To close the fancybox when you click outside, you can use something like below ..

$(':not(<fancybox_links_selector>)').live('click', function(event){
    event.stopPropagation();
    $.fancybox.close();
});

by using this jQuery :not operator and the correct selector, you can select all elements except the elements which opens the fancybox (in your case the images ..)

Now to be able to open the fancybox when you click on the desired links ( images again ..), you should stop their click event from propagating to the parents ..

see below ...

$('<fancybox_links_selector>').live('click', function(event){
    event.stopPropagation();
    event.preventDefault();

    // write any extra required code here
    return false;
});

This will stop the click event from bubbling and allows the fancybox to open ...

Hope this helps ...

How can I close the fancybox by clicking on my page without using overlay:true

1 Answers1