Lightbox not working on Mobile

  • Resolved treecutter

    (@treecutter)


    8 months, 1 week ago

    Hello

    Cannot get the lightbox to work on real mobile devices, e.g. iPad, iPhone etc.

    It does sometimes work in Chrome mobile emulator.

    Testing on clean install of WP 6.8.2, WooCommerce 10.1.2, Product Video Gallery for WooCommerce 1.5.1.5, Twenty Twenty Five theme, no other plugins.

    Have tried all possible combinations of settings.

    Have purchased the Pro version.

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author NikHiL Gadhiya

    (@nikhilgadhiya)

    8 months, 1 week ago

    Hello,
    I’ve checked the product you provided but was unable to reproduce the issue on my end. Everything is working fine, except that the video takes some time to load. I suggest compressing the video size before using it in your product so it can load and play faster.

    Also, on your site’s desktop version, the theme CSS is applying a 50% width to the gallery, which is why it appears small. Please add the following CSS to your site:

    .wp-block-woocommerce-product-image-gallery .images.nickx_product_images_with_video {
        width: 100% !important;
    }


    Thank You.

    Thread Starter treecutter

    (@treecutter)

    8 months, 1 week ago

    Thanks for your kind reply. Perhaps we did not clearly explain.

    The video gallery works fine, but when you tap the lightbox icon https://imgur.com/a/nEGgDoN on a physical mobile device such as an iPad or iPhone with iOS 18.6.2 , the image just judders a little, and light box does not appear

    On a desktop browser the light box works normally

    Thread Starter treecutter

    (@treecutter)

    8 months, 1 week ago

    Some further information.

    If “Zoom Style” is set to OFF, the light box can be made to appear, but ONLY after tapping twice in the light box icon. The first tap brings up the left and right arrows in the image. Only after this a second tap on the light box icon will show the light box.

    If “Zoom Style” is set to LENS, results are erratic, the LENS hides the light box icon, and light box will sometimes appear when tapping another part of the image.

    If “Zoom Style” is set to INNER, the light box cannot be made to appear at all.

    To be sure of this , we have tested on a different server and theme, Twenty Seventeen , again no other plugins enabled, with same results

    The issue seems to be related to the zoom function.

    Plugin Author NikHiL Gadhiya

    (@nikhilgadhiya)

    8 months ago

    Hello,
    The zoom style works only when the screen size is greater than 768 pixels. On mobile devices, only the INNER zoom style is supported, as other zoom styles are not compatible.

    For desktop, the Lens and Window Right zoom styles open the lightbox on image click, because the zoom lens is not allowed to overlap other elements. That’s why we’ve set the lightbox to open on image click for those zoom styles.

    We have already provided an option to disable zoom on mobile devices in plugin settings page — maybe that will help in your case.


    Thank You.

    Thread Starter treecutter

    (@treecutter)

    8 months ago

    Hello and thank you for your continued support, highly appreciated. This is potentially a great plugin we would really like to use.

    Thanks to the clues you have supplied, have now found of what the problem is.

    “disable zoom on mobile devices” is not working properly.

    Tested with iPad Air 4th Gen, iOS 18.6.2, 10.9 inch display, 2360 x 1640 resolution.

    The gallery has the main image, two additional images, and the video after the images.

    Tapping the light box icon on the VIDEO brings up the light box correctly. Tapping on any of the images does NOT bring up the light box, but instead seems the inner zoom still works !

    If “Zoom Style” is set to OFF, everything works perfectly on the iPad, but we really need zoom for desktop, inner is fine.

    Tested on an iPhone 16

    Works as expected , with one issue, the video thumbnail image appears and then quickly disappears leaving empty white space.

    https://macbookmark.uk/product/album/

    Current Plugin Settings:

    Slider Layout:  Horizontal

    Slider Responsive: ticked

    Auto-playSlider: not ticked

    FadeSlider: not ticked

    Infinite Loop: ticked

    Arrow on Slider: not ticked

    Arrow on Thumbnails: not ticked

    Video Thumbnail for all Products: not selected

    Light-box: ticked

    Zoom style: inner

    Disable Zoom on Mobile: ticked

    Zoom Level: 1

    Allow Template Filter: ticked ( double images issue )

    Remove Action: ticked ( video does not work if un-ticked )

    Enable Thumbnails Hook: not ticked

    Hide Thumbnails: not ticked

    Hide Thumbnail: not ticked

    Thumbnails to show: 4

    Adaptive Height: not ticked

    Show Only Videos: not ticked

    Show Video Controls: ticked

    Video Poster Image: not ticked

    Video Looping: not ticked

    Auto Play Video: not ticked

    Place Of The Video: After Product Images

    Thumbnails Layout: slider

    Arrow Color: not set

    Arrow Background Color: not set

    Video Icon Color: not set

    • This reply was modified 8 months ago by treecutter.
    Plugin Author NikHiL Gadhiya

    (@nikhilgadhiya)

    8 months ago

    Hello,

    Regarding the zoom feature — currently, we have implemented it to disable based on mobile devices and screen sizes less than 767px. In our next release, we will provide an option to disable the zoom on touch screen devices (instead of relying only on screen size or device detection).

    We are using a third-party library for the zoom feature, which works well only on desktop. It does not function as expected on tablets or mobile devices.

    Regarding the custom video thumbnail — this feature is part of the paid version, and we do not provide support for the paid version here. Please open a support ticket from our website so we can assist you further.

    Thank You.

    Thread Starter treecutter

    (@treecutter)

    8 months ago

    Thanks very much for your detailed reply, great support !

    Noticed you are relying on wp_is_mobile() , and iPad is using Mac OS Desktop user agent by default, https://discussions.apple.com/thread/256062962?sortBy=rank

    Have written an override filter that works fine to fix this in the meantime.

    Completely agree about the zoom, it does not work well on mobile.

    The replacement gallery also breaks “pinch zoom”, are you aware of that ? This is a shame as it is an important feature for all mobile devices, so would be great of you can fix that.

    Don’t worry about the thumbnail issue, we are not using any custom thumbnail. But you might want to know it is the DEFAULT thumbnail that is broken on iPhone , it works OK on iPad even when we use an override filter for wp_is_mobile(), and OK on Desktop.

    Keep up the great work, this is a super plugin, Thanks !

    Thread Starter treecutter

    (@treecutter)

    8 months ago

    Re. “to disable the zoom on touch screen devices” instead of nquery(window).width() , we tried this:

    (‘ontouchstart’ in window) || (navigator.MaxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)

    Seems to work well on iPhone, iPad and Desktop, you might have a better idea ?

    Just to be clear, “pinch and zoom” works fine on the slider, but is broken on the main image panel.

    One more thing, your zoom/slider icon, the square one, would it not look a lot better with a magnify glass icon so make clear to the visitor what the icon does ?

    Plugin Author NikHiL Gadhiya

    (@nikhilgadhiya)

    8 months ago

    Hello,

    We will implement/fix your suggestion in the next release.

    Regarding video thumbnail.
    After extensive debugging and attempting various solutions, none have successfully resolved the issue. We’ve conducted tests across multiple devices including Mac, Windows, Android, and iPhone, revealing that the problem is only on iPhone devices.
    On iPhones, thumbnails are generated only when the video is on the screen (in the viewport).

    There are only two options to resolve this:

    • Change the video position: Please set Place Of The Video as Before Product Gallery Images from the plugin settings page.
    • Use a custom thumbnail: If you don’t want to change the video position, you can use the video custom thumbnail option.
      • You can set the video thumbnail globally from the plugin settings page.
      • If you want to set a custom thumbnail for each video separately, you can add it from the product edit page where you’ve added the video.

    Thank you.

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Lightbox not working on Mobile’ is closed to new replies.