Close product image lightbox with Android/iOS back button

  • Hi
    I have searched quite extensively about this but have not found a solution.
    My product images in my Woocommer with Storefront theme shop open in fullsize view in a lightbox when my users click them. This lightbox do have a close button (X) on screen for the users to click that correctly takes them back to the product page.
    The problem is that maybe 50% of users press the back button on their Android/iOS device or the browser back button which instead of closing the lightbox and bringing them back to the product page takes them back to the previous page.
    This would be the product catalog if you browse my site normally, but since I run Facebook ads with direct product links for many users this back button takes them all the way out of my site and back to Facebook.
    My products are Old Maps Posters so naturally most user enlarge the product to see the details adn would then like to return to the product page.

    I have thought about either opening the image lightbox in a new page. I tried disabling lightboxes such that the users just open the source file. Here the back buttons work correctly but there is no visible close button as in the lightbox which the other 50% of users use. Does anybody know a solution or plugin which basically allows lightboxes to open in a new page?

    Alternatively mending the actions of the back button could be posible but I have not found a solution for this either.

    I use Woocommerce with the Storefront theme.

    Hope someone is able to help ??

    Nikolaj

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support RK a11n

    (@riaanknoetze)

    Hi Nikolaj,

    At the moment I’m not aware of any off-the-shelf options that would do that and it likely involves custom development. With that said, adjusting the behaviour of the back button through JavaScript can be frowned upon as it could be used for clickjacking.

    With that said, is there any reason you’re linking to the lightbox image directly from your add? Why not simply link to the regular product itself?

    Thread Starter nikwitting

    (@nikwitting)

    Thank you for your response.

    I do link to the regular product itself. The problem is that most of my users then from the regular product page click on the image to enlarge it. After spending some time looking at the image maybe 50% click on the back button. Then they are moved all the way back to Facebook instead of just back to the regular product page.

    So what I would like is for the backbutton instead to just go back to the regular page.

    I agree with regards to changing the behaviour.

    So a solution that in someway instead of opening the lightbox in the same URL open it at with eg. an empty parameter:

    website.com/product?=

    Should allow the backbutton to go back to website.com/product while still allowing the usual lighbox closing options.

    • This reply was modified 4 years, 4 months ago by nikwitting.
    Thread Starter nikwitting

    (@nikwitting)

    Problem solved.
    After some time i found the term “deeplinking lightbox” to be useful in my search. Most deeplinking lightboxes allows you to acces the open lightbox with a link but still the back button did either go to far back or did not close the lightbox at all. I then found this useful site comparing lightboxes, with a demo for each:
    https://justifiedgrid.com/lightboxes/
    I tested them all and found the PhotoSwipe lightbox to be the only one with the right functionality such that the back button actually closes the lightbox as intended while staying in the same page.

    From WordPress i then added the plugin named “Lightbox with PhotoSwipe”
    And to allow it to work on the woocommerce product images I disabled the standard lightbox by adding the following to functions.php:

    add_action( 'wp', 'tu_disable_wc_lightbox', 20 );
function tu_disable_wc_lightbox() {
    remove_theme_support( 'wc-product-gallery-lightbox' );
}

    Quite surprises that I only found this single plugin among many with this quite basic but effective functionality.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Close product image lightbox with Android/iOS back button’ is closed to new replies.