Fluidbox icon indicating copy to clipboard operation
Fluidbox copied to clipboard

Close image on ESC or clicking outside

Open rafa-munoz opened this issue 9 years ago • 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!

rafa-munoz avatar Apr 19 '16 11:04 rafa-munoz

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...

terrymun avatar Apr 19 '16 11:04 terrymun

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?

rafa-munoz avatar Apr 19 '16 12:04 rafa-munoz

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.

terrymun avatar Feb 22 '17 12:02 terrymun

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 :)

terrymun avatar May 25 '17 14:05 terrymun

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) {

designosis avatar Mar 07 '18 22:03 designosis