diff --git a/app/design/frontend/Magento/luma/etc/view.xml b/app/design/frontend/Magento/luma/etc/view.xml
index 349224a34022c..eafcc89e20b75 100644
--- a/app/design/frontend/Magento/luma/etc/view.xml
+++ b/app/design/frontend/Magento/luma/etc/view.xml
@@ -231,6 +231,7 @@
hover
false
+ outside
diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less
index 24a5a2b4033d3..8f4dd78979018 100644
--- a/lib/web/mage/gallery/gallery.less
+++ b/lib/web/mage/gallery/gallery.less
@@ -736,24 +736,30 @@
text-align: center;
top: 0;
z-index: @z-index-10;
+ overflow: hidden;
+
+ .magnifier-large {
+ width: auto;
+ height: auto;
+ max-height: none;
+ max-width: none;
+ border: none;
+ position: absolute;
+ z-index: @z-index-1;
+ }
}
.magnifier-loader-text {
margin-top: 10px;
}
-.magnifier-large {
- position: absolute;
- width: 32%;
- z-index: @z-index-1;
-}
-
.magnifier-preview {
bottom: 0;
left: 58%;
overflow: hidden;
padding: 0;
position: absolute;
+ z-index: 2;
top: 215px;
&:not(.hidden) {
background-color: @color-white;
diff --git a/lib/web/magnifier/magnifier.js b/lib/web/magnifier/magnifier.js
index c475364368922..150c8adf0b22b 100644
--- a/lib/web/magnifier/magnifier.js
+++ b/lib/web/magnifier/magnifier.js
@@ -9,101 +9,100 @@
var magnify = new Magnify($(this), options);
- /*events must be tracked here*/
+ /* events must be tracked here */
/**
* Return that from _init function
*
*/
return magnify;
-
};
function Magnify(element, options) {
- var gOptions = options || {},
+ var customUserOptions = options || {},
$box = $(element),
$thumb,
that = this,
- largeWrapper = options.largeWrapper || '.magnifier-preview',
- $largeWrapper = $(largeWrapper);
+ largeWrapper = options.largeWrapper || '.magnifier-preview',
+ $magnifierPreview = $(largeWrapper);
curThumb = null,
- currentOpts = {
- x: 0,
- y: 0,
- w: 0,
- h: 0,
- lensW: 0,
- lensH: 0,
- lensBgX: 0,
- lensBgY: 0,
- largeW: 0,
- largeH: 0,
- largeL: 0,
- largeT: 0,
- zoom: 2,
- zoomMin: 1.1,
- zoomMax: 5,
- mode: 'outside',
- eventType: 'click',
- status: 0,
- zoomAttached: false,
- zoomable: gOptions.zoomable !== undefined ?
- gOptions.zoomable
- : false,
- onthumbenter: gOptions.onthumbenter !== undefined ?
- gOptions.onthumbenter
- : null,
- onthumbmove: gOptions.onthumbmove !== undefined ?
- gOptions.onthumbmove
- : null,
- onthumbleave: gOptions.onthumbleave !== undefined ?
- gOptions.onthumbleave
- : null,
- onzoom: gOptions.onzoom !== undefined ?
- gOptions.onzoom
- : null
- },
- pos = {
- t: 0,
- l: 0,
- x: 0,
- y: 0
- },
- gId = 0,
- status = 0,
- curIdx = '',
- curLens = null,
- curLarge = null,
- lensbg = gOptions.bg !== undefined ? gOptions.lensbg : true,
- gZoom = gOptions.zoom !== undefined ?
- gOptions.zoom
- : currentOpts.zoom,
- gZoomMin = gOptions.zoomMin !== undefined ?
- gOptions.zoomMin
- : currentOpts.zoomMin,
- gZoomMax = gOptions.zoomMax !== undefined ?
- gOptions.zoomMax
- : currentOpts.zoomMax,
- gMode = gOptions.mode || currentOpts.mode,
- gEventType = gOptions.eventType || currentOpts.eventType,
- data = {},
- inBounds = false,
- isOverThumb = false,
- rate = 1,
- paddingX = 0,
- paddingY = 0,
- enabled = true,
- showWrapper = true;
+ magnifierOptions = {
+ x: 0,
+ y: 0,
+ w: 0,
+ h: 0,
+ lensW: 0,
+ lensH: 0,
+ lensBgX: 0,
+ lensBgY: 0,
+ largeW: 0,
+ largeH: 0,
+ largeL: 0,
+ largeT: 0,
+ zoom: 2,
+ zoomMin: 1.1,
+ zoomMax: 5,
+ mode: 'outside',
+ eventType: 'click',
+ status: 0,
+ zoomAttached: false,
+ zoomable: customUserOptions.zoomable !== undefined ?
+ customUserOptions.zoomable
+ : false,
+ onthumbenter: customUserOptions.onthumbenter !== undefined ?
+ customUserOptions.onthumbenter
+ : null,
+ onthumbmove: customUserOptions.onthumbmove !== undefined ?
+ customUserOptions.onthumbmove
+ : null,
+ onthumbleave: customUserOptions.onthumbleave !== undefined ?
+ customUserOptions.onthumbleave
+ : null,
+ onzoom: customUserOptions.onzoom !== undefined ?
+ customUserOptions.onzoom
+ : null
+ },
+ pos = {
+ t: 0,
+ l: 0,
+ x: 0,
+ y: 0
+ },
+ gId = 0,
+ status = 0,
+ curIdx = '',
+ curLens = null,
+ curLarge = null,
+ lensbg = customUserOptions.bg !== undefined ?
+ customUserOptions.lensbg
+ : true,
+ gZoom = customUserOptions.zoom !== undefined ?
+ customUserOptions.zoom
+ : magnifierOptions.zoom,
+ gZoomMin = customUserOptions.zoomMin !== undefined ?
+ customUserOptions.zoomMin
+ : magnifierOptions.zoomMin,
+ gZoomMax = customUserOptions.zoomMax !== undefined ?
+ customUserOptions.zoomMax
+ : magnifierOptions.zoomMax,
+ gMode = customUserOptions.mode || magnifierOptions.mode,
+ gEventType = customUserOptions.eventType || magnifierOptions.eventType,
+ data = {},
+ inBounds = false,
+ isOverThumb = false,
+ rate = 1,
+ paddingX = 0,
+ paddingY = 0,
+ enabled = true,
+ showWrapper = true;
var MagnifyCls = {
magnifyHidden: 'magnify-hidden',
magnifyOpaque: 'magnify-opaque',
magnifyFull: 'magnify-fullimage'
-
};
-
/**
* Update Lens positon on.
*
@@ -143,105 +142,104 @@
$(thumb).parent().append(lens);
}
- function updateLensOnLoad(idx, thumb, large, largeWrapper) {
- var lens = $box.find('.magnify-lens'),
+ function updateLensOnLoad(idSelectorMainImg, thumb, largeImgInMagnifyLens, largeWrapper) {
+ var magnifyLensElement= $box.find('.magnify-lens'),
textWrapper;
- if (data[idx].status === 1) {
+ if (data[idSelectorMainImg].status === 1) {
textWrapper = $('');
- lens.className = 'magnifier-loader magnify-hidden';
+ magnifyLensElement.className = 'magnifier-loader magnify-hidden';
textWrapper.html('Loading...');
- lens.html('').append(textWrapper);
- } else if (data[idx].status === 2) {
- lens.addClass(MagnifyCls.magnifyHidden);
- lens.html('');
- large.id = idx + '-large';
- large.style.width = data[idx].largeW * rate + 'px';
- large.style.height = data[idx].largeH + 'px';
- large.className = 'magnifier-large magnify-hidden';
-
- if (data[idx].mode === 'inside') {
- lens.append(large);
+ magnifyLensElement.html('').append(textWrapper);
+ } else if (data[idSelectorMainImg].status === 2) {
+ magnifyLensElement.addClass(MagnifyCls.magnifyHidden);
+ magnifyLensElement.html('');
+
+ largeImgInMagnifyLens.id = idSelectorMainImg + '-large';
+ largeImgInMagnifyLens.style.width = data[idSelectorMainImg].largeImgInMagnifyLensWidth + 'px';
+ largeImgInMagnifyLens.style.height = data[idSelectorMainImg].largeImgInMagnifyLensHeight + 'px';
+ largeImgInMagnifyLens.className = 'magnifier-large magnify-hidden';
+
+ if (data[idSelectorMainImg].mode === 'inside') {
+ magnifyLensElement.append(largeImgInMagnifyLens);
} else {
- largeWrapper.html('').append(large);
+ largeWrapper.html('').append(largeImgInMagnifyLens);
}
}
- data[idx].lensH = data[idx].lensH > $thumb.height() ? $thumb.height() : data[idx].lensH;
+ data[idSelectorMainImg].lensH = data[idSelectorMainImg].lensH > $thumb.height() ? $thumb.height() : data[idSelectorMainImg].lensH;
- if (Math.round(data[idx].lensW) === 0) {
- lens.css('display', 'none');
+ if (Math.round(data[idSelectorMainImg].lensW) === 0) {
+ magnifyLensElement.css('display', 'none');
} else {
- lens.css({
- width: data[idx].lensW + 1 + 'px',
- height: data[idx].lensH - 1 + 'px',
+ magnifyLensElement.css({
+ width: Math.round(data[idSelectorMainImg].lensW) + 'px',
+ height: Math.round(data[idSelectorMainImg].lensH) + 'px',
display: ''
});
}
}
function getMousePos() {
- var xPos = pos.x - currentOpts.x,
- yPos = pos.y - currentOpts.y,
+ var xPos = pos.x - magnifierOptions.x,
+ yPos = pos.y - magnifierOptions.y,
t,
l;
- inBounds = xPos < 0 || yPos < 0 || xPos > currentOpts.w || yPos > currentOpts.h ? false : true;
+ inBounds = xPos < 0 || yPos < 0 || xPos > magnifierOptions.w || yPos > magnifierOptions.h ? false : true;
- l = xPos - currentOpts.lensW / 2;
- t = yPos - currentOpts.lensH / 2;
+ l = xPos - magnifierOptions.lensW / 2;
+ t = yPos - magnifierOptions.lensH / 2;
- if (currentOpts.mode !== 'inside') {
- if (xPos < currentOpts.lensW / 2) {
- l = 0;
- }
+ if (xPos < magnifierOptions.lensW / 2) {
+ l = 0;
+ }
- if (yPos < currentOpts.lensH / 2) {
- t = 0;
- }
+ if (yPos < magnifierOptions.lensH / 2) {
+ t = 0;
+ }
- if (xPos - currentOpts.w + Math.ceil(currentOpts.lensW / 2) > 0) {
- l = currentOpts.w - Math.ceil(currentOpts.lensW + 2);
- }
+ if (xPos - magnifierOptions.w + Math.ceil(magnifierOptions.lensW / 2) > 0) {
+ l = magnifierOptions.w - Math.ceil(magnifierOptions.lensW + 2);
+ }
- if (yPos - currentOpts.h + Math.ceil(currentOpts.lensH / 2) > 0) {
- t = currentOpts.h - Math.ceil(currentOpts.lensH);
- }
+ if (yPos - magnifierOptions.h + Math.ceil(magnifierOptions.lensH / 2) > 0) {
+ t = magnifierOptions.h - Math.ceil(magnifierOptions.lensH);
+ }
- pos.l = l;
- pos.t = t;
+ pos.l = l;
+ pos.t = t;
- currentOpts.lensBgX = pos.l;
- currentOpts.lensBgY = pos.t;
+ magnifierOptions.lensBgX = pos.l;
+ magnifierOptions.lensBgY = pos.t;
- if (currentOpts.mode === 'inside') {
- currentOpts.largeL = xPos * (currentOpts.zoom - currentOpts.lensW / currentOpts.w);
- currentOpts.largeT = yPos * (currentOpts.zoom - currentOpts.lensH / currentOpts.h);
- } else {
- currentOpts.largeL = currentOpts.lensBgX * currentOpts.zoom * (currentOpts.largeWrapperW / currentOpts.w) * rate;
- currentOpts.largeT = currentOpts.lensBgY * currentOpts.zoom * (currentOpts.largeWrapperH / currentOpts.h);
- }
+ if (magnifierOptions.mode === 'inside') {
+ magnifierOptions.largeL = Math.round(xPos * (magnifierOptions.zoom - magnifierOptions.lensW / magnifierOptions.w));
+ magnifierOptions.largeT = Math.round(yPos * (magnifierOptions.zoom - magnifierOptions.lensH / magnifierOptions.h));
+ } else {
+ magnifierOptions.largeL = Math.round(magnifierOptions.lensBgX * magnifierOptions.zoom * (magnifierOptions.largeWrapperW / magnifierOptions.w));
+ magnifierOptions.largeT = Math.round(magnifierOptions.lensBgY * magnifierOptions.zoom * (magnifierOptions.largeWrapperH / magnifierOptions.h));
}
}
function onThumbEnter() {
if (_toBoolean(enabled)) {
- currentOpts = data[curIdx];
+ magnifierOptions = data[curIdx];
curLens = $box.find('.magnify-lens');
- if (currentOpts.status === 2) {
+ if (magnifierOptions.status === 2) {
curLens.removeClass(MagnifyCls.magnifyOpaque);
curLarge = $('#' + curIdx + '-large');
curLarge.removeClass(MagnifyCls.magnifyHidden);
- } else if (currentOpts.status === 1) {
+ } else if (magnifierOptions.status === 1) {
curLens.className = 'magnifier-loader';
}
}
}
function onThumbLeave() {
- if (currentOpts.status > 0) {
- var handler = currentOpts.onthumbleave;
+ if (magnifierOptions.status > 0) {
+ var handler = magnifierOptions.onthumbleave;
if (handler !== null) {
handler({
@@ -266,28 +264,30 @@
function move() {
if (_toBoolean(enabled)) {
- if (status !== currentOpts.status) {
+ if (status !== magnifierOptions.status) {
onThumbEnter();
}
- if (currentOpts.status > 0) {
- curThumb.className = currentOpts.thumbCssClass + ' magnify-opaque';
+ if (magnifierOptions.status > 0) {
+ curThumb.className = magnifierOptions.thumbCssClass + ' magnify-opaque';
- if (currentOpts.status === 1) {
+ if (magnifierOptions.status === 1) {
curLens.className = 'magnifier-loader';
- } else if (currentOpts.status === 2) {
+ } else if (magnifierOptions.status === 2) {
curLens.removeClass(MagnifyCls.magnifyHidden);
curLarge.removeClass(MagnifyCls.magnifyHidden);
curLarge.css({
- left: '-' + currentOpts.largeL + 'px',
- top: '-' + currentOpts.largeT + 'px'
+ left: '-' + magnifierOptions.largeL + 'px',
+ top: '-' + magnifierOptions.largeT + 'px'
});
}
- pos.t = pos.t <= 0 ? 0 : pos.t;
+ var borderOffset = 2; // Offset for magnify-lens border
+ pos.t = pos.t <= 0 ? 0 : pos.t - borderOffset;
+
curLens.css({
left: pos.l + paddingX + 'px',
- top: pos.t + 1 + paddingY + 'px'
+ top: pos.t + paddingY + 'px'
});
if (lensbg) {
@@ -296,10 +296,10 @@
});
} else {
curLens.get(0).style.backgroundPosition = '-' +
- currentOpts.lensBgX + 'px -' +
- currentOpts.lensBgY + 'px';
+ magnifierOptions.lensBgX + 'px -' +
+ magnifierOptions.lensBgY + 'px';
}
- var handler = currentOpts.onthumbmove;
+ var handler = magnifierOptions.onthumbmove;
if (handler !== null) {
handler({
@@ -312,33 +312,33 @@
}
}
- status = currentOpts.status;
+ status = magnifierOptions.status;
}
}
- function setThumbData(thumb, thumbData) {
- var thumbBounds = thumb.getBoundingClientRect(),
+ function setThumbData(mainImage, mainImageData) {
+ var thumbBounds = mainImage.getBoundingClientRect(),
w = 0,
h = 0;
- thumbData.x = thumbBounds.left;
- thumbData.y = thumbBounds.top;
- thumbData.w = thumbBounds.right - thumbData.x;
- thumbData.h = thumbBounds.bottom - thumbData.y;
+ mainImageData.x = Math.round(thumbBounds.left);
+ mainImageData.y = Math.round(thumbBounds.top);
+ mainImageData.w = Math.round(thumbBounds.right - mainImageData.x);
+ mainImageData.h = Math.round(thumbBounds.bottom - mainImageData.y);
- if (thumbData.mode === 'inside') {
- w = thumbData.w;
- h = thumbData.h;
+ if (mainImageData.mode === 'inside') {
+ w = mainImageData.w;
+ h = mainImageData.h;
} else {
- w = thumbData.largeWrapperW;
- h = thumbData.largeWrapperH;
+ w = mainImageData.largeWrapperW;
+ h = mainImageData.largeWrapperH;
}
- thumbData.largeW = thumbData.zoom * w;
- thumbData.largeH = thumbData.zoom * h;
+ mainImageData.largeImgInMagnifyLensWidth = Math.round(mainImageData.zoom * w);
+ mainImageData.largeImgInMagnifyLensHeight = Math.round(mainImageData.zoom * h);
- thumbData.lensW = thumbData.w / thumbData.zoom / rate;
- thumbData.lensH = thumbData.h / thumbData.zoom;
+ mainImageData.lensW = Math.round(mainImageData.w / mainImageData.zoom);
+ mainImageData.lensH = Math.round(mainImageData.h / mainImageData.zoom);
}
function _init($box, options) {
@@ -360,11 +360,11 @@
if (_toBoolean(enabled)) {
- $largeWrapper.show().css('display', '');
- $largeWrapper.addClass(MagnifyCls.magnifyHidden);
+ $magnifierPreview.show().css('display', '');
+ $magnifierPreview.addClass(MagnifyCls.magnifyHidden);
set(opts);
} else {
- $largeWrapper.empty().hide();
+ $magnifierPreview.empty().hide();
}
}
@@ -376,7 +376,7 @@
if (showWrapper) {
- if (currentOpts.status !== 0) {
+ if (magnifierOptions.status !== 0) {
onThumbLeave();
}
handleEvents(e);
@@ -390,7 +390,7 @@
if (showWrapper) {
if (!isOverThumb) {
- if (currentOpts.status !== 0) {
+ if (magnifierOptions.status !== 0) {
onThumbLeave();
}
handleEvents(e);
@@ -420,7 +420,7 @@
onThumbEnter(src);
- setThumbData(curThumb, currentOpts);
+ setThumbData(curThumb, magnifierOptions);
pos.x = e.clientX;
pos.y = e.clientY;
@@ -428,7 +428,7 @@
getMousePos();
move();
- var handler = currentOpts.onthumbenter;
+ var handler = magnifierOptions.onthumbenter;
if (handler !== null) {
handler({
@@ -462,15 +462,15 @@
eventType = options.eventType || thumb.getAttribute('data-eventType') || gEventType,
onthumbenter = options.onthumbenter !== undefined ?
options.onthumbenter
- : currentOpts.onthumbenter,
+ : magnifierOptions.onthumbenter,
onthumbleave = options.onthumbleave !== undefined ?
options.onthumbleave
- : currentOpts.onthumbleave,
+ : magnifierOptions.onthumbleave,
onthumbmove = options.onthumbmove !== undefined ?
options.onthumbmove
- : currentOpts.onthumbmove;
+ : magnifierOptions.onthumbmove;
- largeUrl = $thumb.data('original') || gOptions.full || $thumb.attr('src');
+ largeUrl = $thumb.data('original') || customUserOptions.full || $thumb.attr('src');
if (thumb.id === '') {
idx = thumb.id = 'magnifier-item-' + gId;
@@ -529,7 +529,6 @@
onthumbmove: onthumbmove
};
- rate = $thumb.width() / $thumb.height() / (data[idx].largeWrapperW / data[idx].largeWrapperH);
paddingX = ($thumb.parent().width() - $thumb.width()) / 2;
paddingY = ($thumb.parent().height() - $thumb.height()) / 2;
@@ -556,7 +555,6 @@
}
function onMousemove(e) {
-
pos.x = e.clientX;
pos.y = e.clientY;
@@ -567,29 +565,30 @@
}
if (inBounds && isOverThumb) {
- $largeWrapper.removeClass(MagnifyCls.magnifyHidden);
+ if(gMode === 'outside'){
+ $magnifierPreview.removeClass(MagnifyCls.magnifyHidden);
+ }
move();
} else {
onThumbLeave();
isOverThumb = false;
- $largeWrapper.addClass(MagnifyCls.magnifyHidden);
+ $magnifierPreview.addClass(MagnifyCls.magnifyHidden);
}
}
function onScroll() {
if (curThumb !== null) {
- setThumbData(curThumb, currentOpts);
+ setThumbData(curThumb, magnifierOptions);
}
}
$(window).on('scroll', onScroll);
$(window).resize(function () {
- _init($box, gOptions);
+ _init($box, customUserOptions);
});
$box.on('mousemove', onMousemove);
- _init($box, gOptions);
-
+ _init($box, customUserOptions);
}
}(jQuery));