Utilizing the following jQuery script to hide a div whenever anything that does not have the class 'click' is clicked (used for empty space and certain other divs).
$(document).click(function (event) {
if (!$(event.target).hasClass('click')) {
$('#div').hide();
}
});
To prevent closing the div when opening the fancybox gallery (fancybox 2.1.5), I have assigned the 'click' class to all elements 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 am able to click on any of the images without hiding the div. However, clicking on the "next," "previous," or "close" links/buttons generated by fancybox over the image results in the div closing.
I attempted to modify jquery.fancybox.js by adding the 'click' class to the href links for those buttons, but it did not work.
Any suggestions on how to add this class to those links? Or do you have another workaround in mind?
Here's a FIDDLE demonstrating the issue.