Apply class to Fancybox links/buttons that control 'next', 'previous', and 'close'

Question

I'm using the following jquery to close a div when anything without the class 'click' is clicked (for empty space and certain other divs).

$(document).click(function (event) {
    if (!$(event.target).hasClass('click')) {
        $('#div').hide();
              }
});

I don't want opening the fancybox gallery to close the div (fancybox 2.1.5), so I've applied the 'click' class to everything related to fancybox in my html.

<div class="fancybox_container click">
<a class="fancybox_gal click" rel="gallery" href="1s.jpg"><img src="1l.jpg" class="click"></a>
<a class="fancybox_gal click" rel="gallery" href="2s.jpg"><img src="2l.jpg" class="click"></a>
<a class="fancybox_gal click" rel="gallery" href="3s.jpg"><img src="3l.jpg" class="click"></a>
</div>

I can click any of the images without hiding the div. But, when I click the "next" or "previous" or "close" links/buttons that fancybox generates over the image, the div closes.

I edited jquery.fancybox.js, adding the 'click' class to the href links for those buttons, that didn't work.

Any ideas how to apply this class to those links? Or some workaround?

Here's a FIDDLE illustrating the problem.

Answer 1

I think this is what you are looking for:

WORKING:DEMO : UPDATED

JS : UPDATED

$(document).mouseup(function (e) /* it executes on mouse click anywhere on document*/
{
var container = $(".click, a, .fancyboc_gal, .fancybox_container, img"); /* all those div's or links on which if clicked should not close your behind div(#othercontent)*/

if (!container.is(e.target) /* Now Check that click you did is not on gallery  */
    && container.has(e.target).length === 0) // ... nor a descendant of the container
{
    $("#othercontent").hide();
}

});