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 – Nagaraju K Aug 26 '18 at 14:55
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 '19 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 '17 at 14:45
  • Which Theme is activated for frontend? – vishul malik Jan 3 '18 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 '18 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 – Nagaraju K Aug 26 '18 at 14:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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