terrymun/Fluidbox

Close image on ESC or clicking outside

rafa-munoz opened this issue · 5 comments

It would be nice to have these features:

  • If you click outside the image, you close it. It's a common behaviour now with so many touch devices.
  • If you press the ESC button, you close the photo. Many viewers already implement this feature.

Greetings and thanks!

With regards to user actions that trigger closing:

  • Clicking outside the image already closes it... have you tried that?
  • Escape button (key code 27) is not listened on, but you can manually bind it (using $(document).on('keydown'...)) and then trigger the .close() public function. The reason I chose not to implement this is because it's really up to the developer/designer to decide what kind of user action closes it, but on second thought, maybe I should include it as a default behaviour...

Yes, I tried to click outside, but doesn't work at all. Maybe because I have a little bit special layer configuration and needed to customize the behaviour of Fluidbox. Regarding the second point, fair enough, it can be done also by the developer, nothing against about that. But also may be a good idea to include it as a option with default false?

Will keep in view for future usability improvements, but will close this issue for the moment being. Feel free to reopen it if you see the need as such.

After studying the W3C accessibility guidelines, pertaining to the <dialog> behaviour, I have decided that the escape key should trigger Fluidbox close event when pressed on, as it is a standard behaviour expected by end users. This fix will be included in the next minor version update :)

This feature is already there (though disabled) on line 609 of Fluidbox/src/js/jquery.fluidbox.js.

Just need to change this ...

    $d.on('keydown', function(e) {

... to ...

    $fb.on('keydown', function(e) {