Lightbox Glitching in Mobile View

The lightbox on my website is acting strange while on mobile and either not scrolling at all or scrolling really slow then the previous images are showing behind the new image. I have a fair amount of custom JS running on the page and I’m not sure if that’s a problem but in desktop view the slideshow works just fine.

Hi Ryan,

Thanks for reaching out.

Please make sure you only add lightbox’s shortcode once per selector. Example,

[lightbox selector=".other"] [lightbox selector=".other"] [lightbox selector=".other"]

You can’t have that, it should be added once like

[lightbox selector=".other"]

So this is correct too

[lightbox selector=".other"] [lightbox selector=".other1"] [lightbox selector=".other2"]

And as much as possible, make sure the use of lightbox shortcode is minimal, you donm’t have to add one for every existence of the same image with the same selector.

Thanks!

1 Like

So I tried taking off the lightbox shortcode from every image and just using it one time and the slideshow is still messing up in mobile/tablet view.

Hi Ryan,

The issue of lightbox with image behind it is caused by a duplicate lightbox shortcode as Rad said. I did go ahead and resolve that, I see a duplicate [lightbox selector=".kit"] shortcode on one of your text.

Regarding the mobile issue, that could be a conflict with an optimizer plugin or optimizer feature of your site, please clear all your caching and turn off all your optimizer feature for awhile and see if that resolves the issue, also clear your mobile’s browser cache.

Hope it helps,
Cheers!

Okay so now I have the website working perfectly on every device except for iPad. For some reason when I swipe left or right to scroll through images if I move up or down the screen behind will scroll and basically disable the slideshow and it sticks to one image. This is only happening on Google Chrome, Safari doesn’t have any errors and will continue to scroll even if I scroll the background behind the images.

Hi Ryan,

I checked and looks like browser bug and in conflict with touch functionality. Once touch and swiped, the lightbox no longer receives the touch and swipe event rendering the lightbox not usable. And I can’t find any workaround as this moment, but yes, touch event works on other browsers, we’ll continue checking but this issue is lightbox library related and so something we can’t fix easily.

Thanks!

Well that’s rather unfortunate, is there any other way to get a gallery similar to this that will work?

Hi Ryan,

Yes, you can try the Essential Grid extension.

Extension - Essential Grid

Essential Grid Basics

Thanks,

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.