3

I'm using Magento 2.2.1, with a theme that has magento blank theme as parent. I'm having a problem on iPhone 6, but not on Windows mobile or Android. Basically when I go on the product page, and open the product gallery images, I can't close the gallery anymore when I press the X, as I sayd, this happens only on iPhone. The gallery used is a Fotorama, is the default one, anyone has any idea what it might be?

1
  • Hi @alexcr same issue i am facing in Magento2.2.3 CE did u fix this? please advise Aug 26, 2018 at 14:55

3 Answers 3

7

Override fotorama.js in your custom theme at app/design/<vendor>/<custom_theme>/web/fotorama/fotorama.js, you can copy this file from \lib\web\fotorama\fotorama.js and replace code as per below at line no. 1220

From

function stubEvent($el, eventType) {
    $el.on(eventType, function (e) {
        stopEvent(e, true);

        return false;
    });
}

To

function stubEvent($el, eventType) {
     var isIOS = /iP(ad|hone|od)/i.test(window.navigator.userAgent);

    if (isIOS && eventType === 'touchend') {
        $el.on('touchend', function(e){
            $DOCUMENT.trigger('mouseup', e);
        })
    }

    $el.on(eventType, function (e) {
        stopEvent(e, true);

        return false;
    });
}

Note: This is work for me in Magento 2.2.0 version, hopefully this will work in Magento 2.2.1 and other Magento 2.2x versions as well.

1
  • 1
    Strange but your code exist in Magento 2.3.2 and not working for Android :( I replaced if (isIOS && eventType === 'touchend') to if (eventType === 'touchend') and working correctly. Seems before Magento release - not checked code and not tested :)
    – Alex
    Jul 30, 2019 at 13:43
0

This problem is based on lib/web/mage/gallery/gallery.js file on 146 line :

if (this.isTouchEnabled) {
   this.settings.$element.on('tap', '.fotorama__stage__frame', 
   function () {
    var translate = getTranslate($(this).parents('.fotorama__stage__shaft'));

    if (translate[1] === '0' && !$(this).hasClass('fotorama-video-container')) {
        self.openFullScreen();
        self.settings.$pageWrapper.hide();
    }
   });
}

Replace this code with

    if (this.isTouchEnabled && this.settings.isFullscreen) {
            this.settings.$element.on('tap', '.fotorama__stage__frame', function () {
                var translate = getTranslate($(this).parents('.fotorama__stage__shaft'));

                if (translate[1] === '0' && !$(this).hasClass('fotorama-video-container')) {
                   self.openFullScreen();
                   self.settings.$pageWrapper.hide();
                }
            });
        }
3
  • The file lib/web/mage/gallery/gallery.js has already that part of code like that, but starting from the line 153, and it still doesn't work..
    – alexcr
    Dec 27, 2017 at 14:45
  • Which Theme is activated for frontend? Jan 3, 2018 at 5:00
  • I created a new theme, with the luma files, basically did another folder, copyed luma, and did another one, new name, changed css..
    – alexcr
    Jan 11, 2018 at 1:50
0

A fixed has been commited to magento:2.2-develop branch. This worked for me https://github.com/magento/magento2/pull/13268

1
  • Hi @Koen is this fixed in magento2.2.3 CE since i am facing same issue could you please advise Aug 26, 2018 at 14:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.