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 adviseNagaraju Kasa– Nagaraju Kasa2018-08-26 14:55:13 +00:00Commented Aug 26, 2018 at 14:55
Add a comment |
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 :)Alex– Alex2019-07-30 13:43:15 +00:00Commented Jul 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..alexcr– alexcr2017-12-27 14:45:28 +00:00Commented Dec 27, 2017 at 14:45
- Which Theme is activated for frontend?vishul malik– vishul malik2018-01-03 05:00:16 +00:00Commented 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– alexcr2018-01-11 01:50:56 +00:00Commented Jan 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 adviseNagaraju Kasa– Nagaraju Kasa2018-08-26 14:59:58 +00:00Commented Aug 26, 2018 at 14:59