Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

How to Correct An Error of the Fotorama Module in Magento 2

DZone's Guide to

How to Correct An Error of the Fotorama Module in Magento 2

A code snippet on how to fix a Fotorama module bug when using the Magento 2 CMS.

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

As you know, Magento 2 has a defect, which is present at 2.1.2. as well as in the previous versions. This is a problem related to vertical rolling of the product image on the product's details page. This is the mobile devices module — Fotorama.

When we try to scroll down the page while being at the image, we turn over it left or right. In order to get rid of such inconvenience we must correct the function onMove(e) inside the Fotorama library.

That file can be found here: MAGENTO_ROOT/lib/web/fotorama/fotorama.js

We should open it in editor, find the onMove(e) function (it is located on the line 1418), and change it with the new correction:

function onMove(e) {
	if ((e.touches && e.touches.length > 1)
	|| (MS_POINTER && !e.isPrimary)
	|| moveEventType !== e.type
	|| !touchEnabledFLAG) {
		touchEnabledFLAG && onEnd();
		(options.onTouchEnd || noop)();
		return;
	}

	extendEvent(e);
	var xDiff = Math.abs(e._x - startEvent._x), // opt _x → _pageX
	yDiff = Math.abs(e._y - startEvent._y),
	xyDiff = xDiff - yDiff,
	xWin = (tail.go || tail.x || xyDiff >= 0) && !tail.noSwipe,
	yWin = xyDiff < 0;
	if (touchFLAG && !tail.checked) {
		if (touchEnabledFLAG = xWin) {
			stopEvent(e);
		}

	} 
	else {
		stopEvent(e);
		(options.onMove || noop).call(el, e, {touch: touchFLAG});
	}

	if (!moved && Math.sqrt(Math.pow(xDiff, 2) + Math.pow(yDiff, 2)) > tolerance) {
  		moved = true;
	}

	tail.checked = tail.checked || xWin || yWin;
}


Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:
magento ,cms ,images ,web dev

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}