When you use fancybox, it automatically adds listeners which stop any other use of the Esc, Left and Right keys on your keyboard. The just don’t work in forms etc inside Fancybox.
This isn’t such an issue with the escape key, but not being able to use the left and right, for example in text inputs, is a pain.
The changes below add an additional option to Fancybox called useNextPrev which you can set to false to stop Fancybox adding listeners to these keys. I haven’t included the escape key as I think it’s far less of an issue.
The call to Fancybox after these changes would look something like this:
$('a.fancybox').fancybox({useNextPrev:false});
Changes needed to the fancybox javascript file:
replace:
} else if (e.keyCode == 37) {
e.preventDefault();
$.fancybox.prev();
} else if (e.keyCode == 39) {
e.preventDefault();
$.fancybox.next();
}
with:
} else if (currentOpts.useNextPrev && e.keyCode == 37) {
e.preventDefault();
$.fancybox.prev();
} else if (currentOpts.useNextPrev && e.keyCode == 39) {
e.preventDefault();
$.fancybox.next();
}
replace:
$.fn.fancybox.defaults = {
padding : 10,
margin : 20,
with:
$.fn.fancybox.defaults = {
padding : 10,
margin : 20,
useNextPrev : true,
And there you have it. By default Fancybox will use the left and right keys, but you now have the choice to stop it.
[carousel keywords=”jquery” tag=”fetchit-21″]
Snippet from upcoming version –
$(document).unbind(‘keydown.fb’).bind(‘keydown.fb’, function(e) {
if (e.keyCode == 27 && currentOpts.enableEscapeButton) {
e.preventDefault();
$.fancybox.close();
} else if ((e.keyCode == 37 || e.keyCode == 39) && currentOpts.enableKeyboardNav && e.target.tagName !== ‘INPUT’ && e.target.tagName !== ‘TEXTAREA’) {
e.preventDefault();
$.fancybox[ e.keyCode == 37 ? ‘prev’ : ‘next’]();
}
});
Thanks Janis. That at least solves it for caret movement.
There might still be a problem if nesting other javascript functionality into a fancybox, but much less likely.