area where closeOnClick works differs immensely Created Nov 13, 2009

I posted this in another threat already. But this might be the one the tools guys will look at. It seems that you have to click outside the body area to close the overlay. This workaround will close the overlay when clicking anywhere outside the overlay.use this workaround:

$(document).ready(function() {
$("img[rel]").overlay({
top:'40%',
onStart: function(event) {
event.stopImmediatePropagation();
}
});

$('.overlay').click(function(event) {
event.stopImmediatePropagation();
});

});

$(document).click(function() {
$("img[rel]").each(function() {
$(this).overlay().close();
});
});

I ran into this issue, too, and as far as I can tell the relevant line in jquery.tools.js is

if (v.parents(i).length > 1) {

which tells the closeOnClick function to kick in only if the click is on an element that has no more than one parent element. This works fine if the overlay is on its own on a standalone page, but it causes problems if the overlay markup is inside any kind of wrapper or container, as of course it would be on many websites.

If you only have one overlay or your overlays are always in the same position within your markup, you can work around the problem just by changing the "> 1" to reflect the actual number of parent elements. A more flexible workaround is to change the code above to something like

if (v.is('a[rel]') || v.is('a[rel] *') || v.is('.some-class-you-apply-to-overlays') || v.parents().is('.some-class-you-apply-to-overlays')) {

depending on how exactly you're calling the overlay, of course. This tells the script not to close the overlay if the click is on one or more specific trigger elements and overlay classes.

In my opinion this is a bug and should be fixed in future releases with some better method of limiting the click area that doesn't depend on a static number of parent elements. In the meantime, any ideas on how to count the number of parents dynamically and plug it in for v to use as a variable?

@h4rfleur

I used your js update. It worked great when I used soley on the overlay methods. But then I realized that it broke other methods that used the gallery plug-in.

Not sure if this is saying the same thing as above, but for me http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js" did not work, but http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js" worked. I have not investigated the differences but it immediately fixed the problem.

It also fixed a related issue where the mask was not properly setting the area outside of the overlay to the semitransparent color.