Lightbox shortcode doesn't support touch on touch-enabled devices

[Misho]

Hi,

I had a thread open about this or similar issue on other website.

Now I am working on a new one, and the issue is back:

When clicking on the image that is supposed to bring up the Lightbox, nothing happens on a device (laptop) that is touch-enabled. It works only if screen is touched.

Windows: Doesn’t work in Chrome and Firefox. It works in Edge.
Apple: Works in all browsers, but I haven’t tested touch-enabled Apple, only the standard one.

I have tested on two Windnows touch-enabled devices, and both are doing the same. When tested on a standard laptop, the Lightbox is working.

I am pretty sure Lighboxes were working on touch-enabled devices like my laptop, before the August update.

I think this is something to bring to your attention, because in case I am right, all Website visitors with such devices are affected.

Thanks!

[rad]

Hi @Misho,

Thanks for reaching out.

Maybe the touch event is blocking the click event of an image, button or link, and it has no relation with the lightbox since it’s just being called once a click is being made.

Though, there are similar issues with hybrid devices (desktop/laptop + touch) and not just on lightbox. Perhaps, the touch functionality supersedes the click functionality on a hybrid device. We’ll continue checking about this but couldn’t confirm this immediately.

Thanks!

[Misho]

Hi! Thanks, that made me do more tests. This is what I get:

1. As soon as I remove the [lightbox selector=".ltbx-video"] part, the link works normally. But obviously, it doesn’t fire-up the lightbox but instead it leads dyrectly to Youtube. Image. Link clicks are working.

2. I have tried to use a simple HTML+CSS+JS lightbox, and it works.

These two things are deepening my beliefs that there is a problem with the native lighbox shortcode.

This is the JS that works, if it means anything:

https://codepen.io/vavik96/pen/BRKbNq

[ruenel]

Hello @Misho,

Thanks for updating in!

1.) When the lightbox shortcode is not present, the click/touch events will work and visit the link as expected. The lightbox JS code will prevent the links from firing up and loads up the lightbox instead.

2.) This should always work because there are no conflicts and the media box JS code is working without any issues with the theme.

Hope this helps.

[Misho]

Hi @RueNel!

1. I know that should the case. I was responding to Rad who said that “Maybe the touch event is blocking the click event of an image”. So I have tested that, and no, it doesn’t block it. So Touch-event is affecting only the Lightbox, which was my initial thought.

2. I have tested a different lightbox method, to see if only the native X/Pro lightbox is affected. And it turned out it is.

So the issue is still there:

Visitors who come to an X/Pro website that have touch-enabled laptops, cannot see native Lightbox content in Chrome and Firefox by clicking. Only by touching. They can see it in Edge. (Tested on Windows).

I don’t know the percentage of such users, but whatever the percentage it is, it lowers conversion rates so using the native lightbox is not recommended until the issue gets resolved. It is expected that despite the touchscreen, many (most?) of laptop users will use a mouse and/or the touchpad.

The purpose of this thread is to see if you can reprorduce the issue (using a laptop that has touchscreen), and hopefully fix it if you confirm it.

Thanks!

[rad]

Hi @Misho,

In that case, we’ll continue checking but we have no idea what is happening on your end as of yet. We’ll have to test it on the similar device (hybrid). Though lightbox built-in to the builder is never updated or changed, it’s the same lightbox library used in older versions. The same reason it’s not directly integrated to cornerstone as feature or element, instead, just a shortcode.

What I’m referring to touch blocking the click event, I was referring to multiple events. And detaching lightbox will, of course, give way to default event since touching or clicking a link will default to the same function, which is linking. Hence, there is no difference in what’s really executed (touch or click) since both results on the same outcome.

Thanks!

[Misho]

Ok, great!

I’ll just add that I have tested on two Asus Zenbook Pro laptops, 13 and 15 inch. They both had the same issue, and on multiple websites.

Thanks!

[rad]

Thanks for the information. I’ll see if I can find similar device. Cheers!