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?
3 Answers
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.
-
1Strange 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 :)– AlexJul 30, 2019 at 13:43
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();
}
});
}
-
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..– alexcrDec 27, 2017 at 14:45
-
-
I created a new theme, with the luma files, basically did another folder, copyed luma, and did another one, new name, changed css..– alexcrJan 11, 2018 at 1:50
A fixed has been commited to magento:2.2-develop branch. This worked for me https://github.com/magento/magento2/pull/13268
-
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