Accessibility update: Like version 4, click in black area to close popup gallery

[a4jp-com]

I'm making a website for people that can't use PCs or phones well and find it difficult to click the small cross to close the popup gallery. Can you brink back the setting from version 4 to close the gallery by clicking the black area around the image on desktops (->phones) please. Some of the people I'm working now with said that was easier to use. I know I wont need this on every website but it would help heaps. I also want to make the icons bigger easily if possible. Sorry for all the requests but also thank you for making a great plugin/program.

I'm using this through a plugin in WordPress made by Arno Welzel

https://wordpress.org/support/topic/close-the-lightbox-by-clicking-outside-the-image/#post-16192794

[arnowelzel]

I think you are referring to mobile mode - because in desktop mode clicking outside the image works already, see https://wordpress-demo.arnowelzel.de/lightbox-with-photoswipe-5/ as example.

[a4jp-com]

Yes, sorry for the confusion. I've been switching back and forth between different devices and plugins but that's what I mean. I just updated the first post here.

[arnowelzel]

I just checked that with PhotoSwipe 4 - there is no option for "tap outside the image to close" and tapping outside does also only show/hide the controls in mobile view and clicking closes the image in desktop view.

See for reference:

PhotoSwipe 4: https://wordpress-demo.arnowelzel.de/lightbox-with-photoswipe/ PhotoSwipe 5: https://wordpress-demo.arnowelzel.de/lightbox-with-photoswipe-5-overlay-caption/

My WordPress plugin only provides the option "Enable tap to toggle controls on mobile devices" for PhotoSwipe 4 which was not added to PhotoSwipe 5 yet as I did not have time to test the global tap options yet. However PhotoSwipe 4 also does not have any option to close images when tapping outside in mobile view. Similar to PhotoSwipe 5 you can close images in PhotoSwipe 4 by dragging up or down or using the "pinch to close" gesture. In that version also only clicking in desktop mode (not mobile mode!) closes images - but this also happens in PhotoSwipe 5 as well.

So far I see no difference at all between PhotoSwipe 4 and 5 in this manner. So what exactly are you referring to? Do you have a working example with PhotoSwipe 4 to demonstrate the desired behaviour?

[stefanholzapfel]

Hi @a4jp-com @arnowelzel !

I don't know if it's still relevant for you but since I needed that shortly and came across your thread, this is how I worked around it:

Write a custom tapAction and identify the click target via it's classes like:

new PhotoSwipeLightbox({
          tapAction: (pt, evt) => {
              if (evt.target.classList.contains('pswp__img')) {
                  this.imageGallery.pswp.next();
              } else {
                  this.imageGallery.pswp.close();
              }
          },
          pswpModule: () => import('photoswipe') 
});

[arnowelzel]

@stefanholzapfel Thanks for the idea - yes this would be a possible way. Maybe I'll include this for my next WordPress plugin update.

[a4jp-com]

That would be wonderful.

[acwolff]

I did insert the code in my Options list, but I got the message imageGallery is undefined, To get it working I changed the code into:

      tapAction: (pt, evt) => {
          if (evt.target.classList.contains('pswp__img')) {
              pswp.next();
          } else {
              pswp.close();
          }
      },

You see the result in this album.

[stefanholzapfel]

Oh sorry "this.imageGallery" is a spillover from my local code. Of course that has to be replaced with your photoswipe instance. thanks @acwolff

[arnowelzel]

I just checked, how PhotoSwipe 4 behaved here - in fact there was no "tap outside the image to close it" either. Even if I disable "tap to toggle controls in mobile view" the only thing what changed was, that tapping is ignored completely.

So maybe you confused something: there was never an option for "tap outside mobile devices to close image". And the more I think about this, this also makes sense: because depending on what size the image is, there may even not be any space to tap on and relying on the possibility to tap outside an image may not help either.

[arnowelzel]

In fact the whole thing is a bad idea: the default tap action is used to handle "tap to toggle controls" - so if you tap the display, no matter where, the controls are displayed or hidden.

Changing this behaviour would introduce a very fundamental change which is unexpected: tapping will then depend on where exactly one taps - inside an image this will do nothing (even not show/hide controls any more) and outside the image it will close the lightbox which is unexpected because there is a "X" symbol to do so and one can also swipe up or down to do so.

So in my case I will not add this for the WordPress plugin soon as it is very confusing and would at least need additional code to bring back "tap to toggle controls". Also PhotoSwipe 4 did not behave this way and nobody ever asked for this ever since my WordPress plugin exists.

[stefanholzapfel]

Maybe @a4jp-com is confusing it with the bgClickAction which is still available but only listening for mouse click events. It's default is the zoom-or-close action value which closes the gallery for smaller images.

Our app's design team also brought up the request to close the gallery on background tap because they think it's the most intuitive behavior and I agree (still having the close icon and swipe-up gesture for images covering all space).

I also don't think you should integrate that into your plugin since everybody will expect the API to behave like the original photoswipe API and that would break it. Though it would make sense to make a pull request for photoswipe itself and replace the tapAction with imageTapAction and bgTapAction to be consistent with the options for click actions.

For now, whoever need's this custom behavior can write the custom action handler as suggested anyway. I don't see a problem with adding the toggle control code to the evt.target.classList.contains('pswp__img') branch of the if statement if needed.

[acwolff]

Other lightboxes like fancyBox and lightGallery both closes the lightbox if you click outside the image, both on a PC and on a mobile device, so I think it is a good idea that PhotoSwipe offers the same function. Viewers with bad eyes or thick fingers will like it too!

[arnowelzel]

Other lightboxes like fancyBox and lightGallery both closes the lightbox if you click outside the image, both on a PC and on a mobile device, so I think it is a good idea that PhotoSwipe offers the same function. Viewers with bad eyes or thick fingers will like it too!

Do these lightboxes also support closing the image by swiping up or down like PhotoSwipe?

[dimsemenov]

PhotoSwipe default behavior simply tries to be consistent with similar native image viewers. I don't think any of them close when taping on a backdrop, let me know if I'm wrong.

If it's a valid concern for your app, my recommendation is to set tapAction: 'close' and not try to separate a tap on an image and a tap on a backdrop. Backdrop and image aren't interactive elements like <button>, so it's easier to miss and tap on the wrong thing. Aside from that, the image size can match the viewport size.

If you reeeally want to separate them, the code posted by @acwolff is correct:

  tapAction: (pt, evt) => {
      if (evt.target.classList.contains('pswp__img')) {
          pswp.next();
      } else {
          pswp.close();
      }
  },

[acwolff]

Do these lightboxes also support closing the image by swiping up or down like PhotoSwipe?

Yes they support that too.