-
+
\ No newline at end of file
diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less
index b4a20fe03cd37..c9e97917bb78e 100644
--- a/lib/web/mage/gallery/gallery.less
+++ b/lib/web/mage/gallery/gallery.less
@@ -8,6 +8,7 @@
@fotorama_close_size: 30px;
@size-fotorama-block: 50px;
@fotorama-thumb-arrow: 30px;
+@fotorama-fullscreen-zoom-time: 0.3s;
@import '../../css/source/lib/_lib.less'; // Global lib
@import '../../css/source/_theme.less'; // Theme overrides
@@ -78,7 +79,6 @@
&:extend(.fotorama-sprite);
background-position: 0 (-@size-fotorama-block) !important;
}
-
.fotorama__zoom-in {
top: 0;
&:extend(.fotorama-sprite);
@@ -86,6 +86,15 @@
}
}
+.circle {
+ position: absolute;
+ background-color: silver;
+ opacity: 0.7;
+ border-radius: 100%;
+ height: 1px;
+ width: 1px;
+}
+
.fotorama__zoom-in,
.fotorama__zoom-out {
display: none;
@@ -93,6 +102,7 @@
.fotorama__fullscreen {
.fotorama__zoom-in,
.fotorama__zoom-out {
+ overflow: hidden;
position: absolute;
width: 50px;
height: 50px;
@@ -725,8 +735,13 @@
display: none;
}
+.fotorama--fullscreen-icons {
+ .fotorama__fullscreen-icon {
+ display: none;
+ }
+}
+
.fotorama__fullscreen-icon {
- //display: none;
&:focus {
&:extend(.fotorama-focus);
border-radius: 50%;
@@ -736,7 +751,7 @@
.fotorama--fullscreen {
.fotorama__fullscreen-icon {
- //display: inline-block;
+ display: inline-block;
background-position: (-@size-fotorama-block) 0;
}
}
@@ -1083,6 +1098,8 @@
max-height: 100%;
max-width: 100%;
vertical-align: middle;
+ transition-duration: @fotorama-fullscreen-zoom-time;
+ transition-property: width, height, top, left;
}
}
@@ -1235,9 +1252,7 @@ body.fotorama__fullscreen {
.magnify-fullimage {
display: inline-block;
}
- .fotorama__stage__shaft {
- //.fotorama__img {
- // display: none;
- //}
+ .magnify-lens {
+ display: none !important;
}
}
diff --git a/lib/web/magnifier/magnifier.js b/lib/web/magnifier/magnifier.js
index 2a315a2b9bc6f..232579bb4f41e 100644
--- a/lib/web/magnifier/magnifier.js
+++ b/lib/web/magnifier/magnifier.js
@@ -4,11 +4,6 @@
*/
;(function ($) {
- var onWheelCallback,
- zoomWidthStep = 0,
- zoomHeightStep = 0,
- isDraggable = false;
-
$.fn.magnify = function (options) {
'use strict';
@@ -29,9 +24,8 @@
$thumb,
that = this,
largeWrapper = options.largeWrapper || ".magnifier-preview",
- $largeWrapper = $(largeWrapper),
- zoomShown = false,
- curThumb = null,
+ $largeWrapper = $(largeWrapper);
+ curThumb = null,
currentOpts = {
x: 0,
y: 0,
@@ -564,161 +558,6 @@
}
}
- function toggleZoomButtons($image) {
- var path = $image.attr("src"),
- imgSize;
- if (path) {
- imgSize = getImageSize(path);
- if ((imgSize.rh > $image.parent().height()) || (imgSize.rw > $image.parent().width())) {
- $('.fotorama__zoom-in').show();
- $('.fotorama__zoom-out').show();
- zoomShown = true;
- } else {
- $('.fotorama__zoom-in').hide();
- $('.fotorama__zoom-out').hide();
- zoomShown = false;
- }
- } else {
- $('.fotorama__zoom-in').hide();
- $('.fotorama__zoom-out').hide();
- zoomShown = false;
- }
- }
-
- function magnifierFullscreen () {
- var isDragActive = false,
- startX,
- startY,
- imagePosX,
- imagePosY,
- touch,
- isTouchEnabled = 'ontouchstart' in document.documentElement;
-
- $('[data-gallery-role="gallery"]').on('fotorama:fullscreenenter fotorama:showend fotorama:load', function () {
- var $preview = $('[data-gallery-role="stage-shaft"] [data-active="true"] img'),
- $image = $('[data-gallery-role="stage-shaft"] [data-active="true"] .fotorama__img--full'),
- $imageContainer = $preview.parent(),
- gallery = $('[data-gallery-role="gallery"]');
-
- gallery.on('fotorama:fullscreenexit', function () {
- $thumb.css({
- 'top': '',
- 'left': ''
- });
- });
-
- if (gallery.data('fotorama').fullScreen) {
- toggleZoomButtons($image);
- resetVars($('[data-gallery-role="stage-shaft"] .fotorama__img--full'));
-
- $('.fotorama__stage__frame .fotorama__img--full').each(function () {
- var path = $(this).attr("src"),
- imgSize;
- if (path) {
- imgSize = getImageSize(path);
-
- if ((imgSize.rh > $(this).parent().height()) || (imgSize.rw > $(this).parent().width())) {
-
- if (imgSize.rh / imgSize.rw < $(this).parent().height() / $(this).parent().width()) {
- $(this).width($(this).parent().width());
- $(this).height('auto');
- } else {
- $(this).height($(this).parent().height());
- $(this).width('auto');
- }
-
- $(this).css({
- 'top': '',
- 'left': ''
- });
- }
- }
- });
- }
-
- $image
- .off(isTouchEnabled ? 'touchstart' : 'pointerdown mousedown MSPointerDown')
- .on(isTouchEnabled ? 'touchstart' : 'pointerdown mousedown MSPointerDown', function (e) {
- if (gallery.data('fotorama').fullScreen && isDraggable) {
- e.preventDefault();
- $image.css('cursor', 'move');
- imagePosY = $image.offset().top;
- imagePosX = $image.offset().left;
-
- if (isTouchEnabled) {
- touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
- e.clientX = touch.pageX;
- e.clientY = touch.pageY;
- }
- startX = e.clientX || e.originalEvent.clientX;
- startY = e.clientY || e.originalEvent.clientY;
- isDragActive = true;
- }
- });
-
-
-
- $image
- .off(isTouchEnabled ? 'touchmove' : 'mousemove pointermove MSPointerMove')
- .on(isTouchEnabled ? 'touchmove' : 'mousemove pointermove MSPointerMove', function (e) {
- if (gallery.data('fotorama').fullScreen && isDragActive && isDraggable) {
-
- var top,
- left,
- startOffset = $image.offset(),
- clientX = e.clientX || e.originalEvent.clientX,
- clientY = e.clientY || e.originalEvent.clientY;
-
-
- e.preventDefault();
-
- if (isTouchEnabled) {
- touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
- e.clientX = touch.pageX;
- e.clientY = touch.pageY;
- }
- top = +imagePosY + (clientY - startY);
- left = +imagePosX + (clientX - startX);
-
- if ($image.height() > $imageContainer.height()) {
-
- if (($imageContainer.offset().top + $imageContainer.height()) > (top + $image.height())) {
- top = $imageContainer.offset().top + $imageContainer.height() - $image.height();
- } else {
- top = ($imageContainer.offset().top < top) ? 0 : top;
- }
- $image.offset({
- 'top': top
- });
- }
-
- if ($image.width() > $imageContainer.width()) {
-
- if (($imageContainer.offset().left + $imageContainer.width()) > (left + $image.width())) {
- left = $imageContainer.offset().left + $imageContainer.width() - $image.width();
- } else {
- left = ($imageContainer.offset().left < left) ? $imageContainer.offset().left : left;
- }
- $image.offset({
- 'left': left
- });
- }
- }
- });
-
- $image
- .off(isTouchEnabled ? 'touchend' : 'mouseup pointerup MSPointerUp')
- .on(isTouchEnabled ? 'touchend' : 'mouseup pointerup MSPointerUp', function (e) {
- if (gallery.data('fotorama').fullScreen && isDragActive && isDraggable) {
- isDragActive = false;
- $image.css('cursor', 'pointer');
-
- return false;
- }
- });
- });
- }
-
function onScroll() {
if (curThumb !== null) {
@@ -726,260 +565,14 @@
}
}
- if ($('.fotorama-item').data('fotorama').fullScreen) {
- $('.fotorama__stage__frame .fotorama__img--full').each(function () {
- var image = new Image();
- image.src = $(this).attr("src");
-
- if ( (image.height > $(this).parent().height()) || (image.width > $(this).parent().width()) ) {
-
- if (image.height / image.width < $(this).parent().height() / $(this).parent().width()) {
- $(this).width($(this).parent().width());
- $(this).height('');
- } else {
- $(this).height($(this).parent().height());
- $(this).width('');
- }
- }
- });
- }
$(window).on('scroll', onScroll);
$(window).resize(function() {
-
- if ($('.fotorama-item').data('fotorama').fullScreen) {
-
- $('.fotorama__stage__frame .fotorama__img--full').each(function () {
- var image = new Image();
- image.src = $(this).attr("src");
-
- if ( (image.height > $(this).parent().height()) || (image.width > $(this).parent().width()) ) {
-
- if (image.height / image.width < $(this).parent().height() / $(this).parent().width()) {
- $(this).width($(this).parent().width());
- $(this).height('');
- } else {
- $(this).height($(this).parent().height());
- $(this).width('');
- }
- }
- });
-
- toggleZoomButtons($('[data-gallery-role="stage-shaft"] [data-active="true"] .fotorama__img--full'));
- }
-
-
_init($box, gOptions);
-
});
- function resetVars($image) {
- zoomWidthStep = 0;
- zoomHeightStep = 0;
- isDraggable = false;
- $image.css({
- top: 0,
- left: 0,
- right: 0,
- bottom: 0,
- cursor: ''
- });
- }
-
- function checkFullscreenImagePosition(widthStep, heightStep) {
- var $preview, $image, $imageContainer, gallery, top, left;
-
- if ($('[data-gallery-role="gallery"]').data('fotorama').fullScreen) {
-
- $preview = $('[data-gallery-role="stage-shaft"] [data-active="true"] img');
- $image = $('[data-gallery-role="stage-shaft"] [data-active="true"] .fotorama__img--full');
- $imageContainer = $preview.parent();
- gallery = $('[data-gallery-role="gallery"]');
- top = $image.offset().top;
- left = $image.offset().left;
-
- if ($image.height() > $imageContainer.height()) {
- if ($imageContainer.offset().top + $imageContainer.height() > top + $image.height() + heightStep/2) {
- top = $imageContainer.offset().top + $imageContainer.height() - $image.height() + heightStep/2;
- } else {
- top = ($imageContainer.offset().top <= top + heightStep/2 && heightStep > 0) ? 0 : top + heightStep/2;
- }
- $image.css({
- top: top,
- bottom: 'auto'
- });
- } else {
- $image.css({
- top: 0,
- bottom: 0
- });
- }
-
- if ($image.width() > $imageContainer.width()) {
- if (($imageContainer.offset().left + $imageContainer.width()) > (left + $image.width() + widthStep/2)) {
- left = $imageContainer.offset().left + $imageContainer.width() - $image.width() + widthStep/2;
- } else {
- left = ($imageContainer.offset().left <= left + widthStep/2 && widthStep > 0) ? 0 : left - $imageContainer.offset().left + widthStep/2;
- }
- $image.css({
- left: left,
- right: 'auto'
- });
- } else {
- $image.css({
- left: 0,
- right: 0
- });
- }
- }
- }
-
- function zoomIn(e) {
- if (zoomShown) {
- var $image = $('[data-gallery-role="stage-shaft"] [data-active="true"] .fotorama__img--full'),
- imgOriginalSize = $image.length ? getImageSize($image[0].src) : '',
- widthResult,
- heightResult;
-
- if (!zoomWidthStep) {
- zoomWidthStep = Math.ceil((imgOriginalSize.rw - $image.width())/parseFloat(options.fullscreenzoom));
- zoomHeightStep = Math.ceil((imgOriginalSize.rh - $image.height())/parseFloat(options.fullscreenzoom));
- }
- widthResult = $image.width() + zoomWidthStep;
- heightResult = $image.height() + zoomHeightStep;
-
- if (widthResult >= imgOriginalSize.rw) {
- widthResult = imgOriginalSize.rw;
- }
- if (heightResult >= imgOriginalSize.rh) {
- heightResult = imgOriginalSize.rh;
- }
-
- if ( zoomShown ) {
- isDraggable = true;
- }
-
- if ($image.width() >= $image.height() && $image.width() !== imgOriginalSize.rw) {
- $image.css({
- width: widthResult,
- height: 'auto'
- });
- checkFullscreenImagePosition(-zoomWidthStep, -zoomHeightStep);
- } else if ($image.width() < $image.height() && $image.height() !== imgOriginalSize.rh) {
- $image.css({
- width: 'auto',
- height: heightResult
- });
- checkFullscreenImagePosition(-zoomWidthStep, -zoomHeightStep);
- }
- }
-
- return false;
- }
-
- function zoomOut(e) {
- if (zoomShown) {
- var $image = $('[data-gallery-role="stage-shaft"] [data-active="true"] .fotorama__img--full'),
- setedResult = $image.width() - zoomWidthStep,
- widthCheck = $image.width() - zoomWidthStep <= $image.parent().width(),
- heightCheck = $image.height() - zoomHeightStep <= $image.parent().height();
-
- e.preventDefault();
-
- if (widthCheck && heightCheck) {
- if ($image.width() >= $image.height()) {
- $image.trigger('fotorama:load');
-
- return false;
- } else if ($image.width() < $image.height()) {
- $image.trigger('fotorama:load');
-
- return false;
- }
- }
-
- $image.css({'width': setedResult, height: 'auto'});
- checkFullscreenImagePosition(zoomWidthStep, zoomHeightStep);
- }
-
- return false;
- }
-
- /**
- * Return width and height of original image
- * @param src path for original image
- * @returns {{rw: number, rh: number}}
- */
- function getImageSize(src) {
- var img = new Image(),
- imgSize = {
- rw: 0,
- rh: 0
- };
- img.src = src;
- imgSize.rw = img.width;
- imgSize.rh = img.height;
- return imgSize;
- }
-
-
- function setEventOnce() {
- $('.fotorama__zoom-in')
- .off('mouseup')
- .on('mouseup', zoomIn);
- $('.fotorama__zoom-out')
- .off('mouseup')
- .on('mouseup', zoomOut);
- $('.fotorama__zoom-in')
- .off('touchstart')
- .on('touchstart', zoomIn);
- $('.fotorama__zoom-out')
- .off('touchstart')
- .on('touchstart', zoomOut);
- }
-
$(document).on('mousemove', onMousemove);
_init($box, gOptions);
- setEventOnce();
- magnifierFullscreen();
-
- if (!onWheelCallback) {
- onWheelCallback = function onWheel(e) {
- if ($('[data-gallery-role="gallery"]').data('fotorama').fullScreen) {
- e = e || window.event;
-
-
- var delta = e.deltaY || e.detail || e.wheelDelta;
-
- if (delta > 0) {
- zoomOut(e);
- } else {
- zoomIn(e);
- }
-
- e.preventDefault ? e.preventDefault() : (e.returnValue = false);
- }
- };
- }
- $('.fotorama-item').on('fotorama:load', function () {
- if (document.querySelector('.fotorama__stage').addEventListener) {
- if ('onwheel' in document) {
- // IE9+, FF17+, Ch31+
- document.querySelector('.fotorama__stage').removeEventListener("wheel", onWheelCallback);
- document.querySelector('.fotorama__stage').addEventListener("wheel", onWheelCallback);
- } else if ('onmousewheel' in document) {
- document.querySelector('.fotorama__stage').removeEventListener("mousewheel", onWheelCallback);
- document.querySelector('.fotorama__stage').addEventListener("mousewheel", onWheelCallback);
- } else {
- // Firefox < 17
- document.querySelector('.fotorama__stage').removeEventListener("MozMousePixelScroll", onWheelCallback);
- document.querySelector('.fotorama__stage').addEventListener("MozMousePixelScroll", onWheelCallback);
- }
- } else { // IE8-
- document.querySelector('.fotorama__stage').detachEvent("onmousewheel", onWheelCallback);
- document.querySelector('.fotorama__stage').attachEvent("onmousewheel", onWheelCallback);
- }
- });
}
}(jQuery));
diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js
index 06a835ef9a2df..877a2683ecf76 100644
--- a/lib/web/magnifier/magnify.js
+++ b/lib/web/magnifier/magnify.js
@@ -14,9 +14,15 @@ define([
gallerySelector = '[data-gallery-role="gallery"]',
magnifierSelector = '[data-gallery-role="magnifier"]',
magnifierZoomSelector = '[data-gallery-role="magnifier-zoom"]',
- fullScreenIcon = '[data-gallery-role="fotorama__fullscreen-icon"]',
+ zoomInButtonSelector = '[data-gallery-role="fotorama__zoom-in"]',
+ zoomOutButtonSelector = '[data-gallery-role="fotorama__zoom-out"]',
+ fullscreenImageSelector = '[data-gallery-role="stage-shaft"] [data-active="true"] .fotorama__img--full',
hideMagnifier,
- behaveOnHover;
+ behaveOnHover,
+ zoomWidthStep,
+ zoomHeightStep,
+ zoomShown = true,
+ allowAnimating = true;
if (isTouchEnabled) {
$(element).on('fotorama:showend fotorama:load', function () {
@@ -25,6 +31,448 @@ define([
});
}
+ /**
+ * Return width and height of original image
+ * @param src path for original image
+ * @returns {{rw: number, rh: number}}
+ */
+ function getImageSize(src) {
+ var img = new Image(),
+ imgSize = {
+ rw: 0,
+ rh: 0
+ };
+
+ img.src = src;
+ imgSize.rw = img.width;
+ imgSize.rh = img.height;
+
+ return imgSize;
+ }
+
+ function resetVars($image) {
+ zoomWidthStep = 0;
+ zoomHeightStep = 0;
+ allowAnimating = true;
+ $image.css({
+ top: 0,
+ left: 0,
+ right: 0,
+ bottom: 0,
+ cursor: '',
+ width: 'auto',
+ height: 'auto',
+ maxWidth: '100%',
+ maxHeight: '100%'
+ });
+ }
+
+ function clickAnimation(e) {
+
+ var roundRadius = 80,
+ clickAnimationDuration = 400;
+
+ $('
').addClass('circle').offset({
+ left: e.pageX - e.currentTarget.offsetLeft,
+ top: e.pageY - e.currentTarget.offsetTop
+ }).appendTo(e.currentTarget).animate(
+ {
+ height: roundRadius,
+ width: roundRadius,
+ left: e.pageX - roundRadius / 2 - e.currentTarget.offsetLeft,
+ top: e.pageY - roundRadius / 2 - e.currentTarget.offsetTop,
+ opacity: 0
+ },
+ clickAnimationDuration,
+ 'swing',
+ function () {
+ $(this).remove();
+ }
+ );
+ }
+
+ function toggleZoomButtons($image) {
+ var path = $image.attr('src'),
+ imgSize;
+
+ if (path) {
+ imgSize = getImageSize(path);
+
+ if (imgSize.rh > $image.parent().height() || imgSize.rw > $image.parent().width()) {
+ $(zoomInButtonSelector).show();
+ $(zoomOutButtonSelector).show();
+ zoomShown = true;
+ } else {
+ $(zoomInButtonSelector).hide();
+ $(zoomOutButtonSelector).hide();
+ zoomShown = false;
+ }
+ } else {
+ $(zoomInButtonSelector).hide();
+ $(zoomOutButtonSelector).hide();
+ zoomShown = false;
+ }
+ }
+
+ function checkFullscreenImagePosition($image, dimentions, widthStep, heightStep) {
+ var $imageContainer, settings, top, left, right, bottom, ratio;
+
+ if ($(gallerySelector).data('fotorama').fullScreen && allowAnimating) {
+
+ $imageContainer = $image.parent();
+ top = $image.offset().top;
+ left = $image.offset().left;
+ ratio = $image.width() / $image.height();
+
+ if (!isNaN(dimentions.width)) {
+ dimentions.height = dimentions.width / ratio;
+ }
+
+ if (!isNaN(dimentions.height)) {
+ dimentions.width = dimentions.height * ratio;
+ }
+
+ if (dimentions.height >= $imageContainer.height()) {
+ top += heightStep / 2;
+ bottom = 0;
+
+ top = top < $imageContainer.height() - dimentions.height ?
+ $imageContainer.height() - dimentions.height : top;
+ top = top > 0 ? 0 : top;
+ } else {
+ top = 0;
+ bottom = 0;
+ }
+
+ if (dimentions.width >= $imageContainer.width()) {
+ left += -$imageContainer.parent().offset().left + widthStep / 2;
+ right = 0;
+
+ left = left < $imageContainer.width() - dimentions.width ?
+ $imageContainer.width() - dimentions.width : left;
+ left = left > 0 ? 0 : left;
+ } else {
+ left = 0;
+ right = 0;
+ }
+
+ settings = $.extend(dimentions, {
+ left: left,
+ top: top,
+ bottom: bottom,
+ right: right
+ });
+
+ //if (allowAnimating) {
+ //allowAnimating = false;
+ $image.css(settings);
+ //}
+ }
+ }
+
+ function zoomIn(e) {
+ var $image, imgOriginalSize, widthResult, heightResult, dimentions = {};
+
+ if (zoomShown) {
+ $image = $(fullscreenImageSelector);
+ imgOriginalSize = getImageSize($image[0].src);
+
+ e.preventDefault();
+
+ if (e.type === 'click' || e.type === 'touchstart') {
+ clickAnimation(e);
+ }
+
+ if (!zoomWidthStep) {
+ zoomWidthStep = Math.ceil((imgOriginalSize.rw - $image.width()) /
+ parseFloat(config.magnifierOpts.fullscreenzoom));
+ zoomHeightStep = Math.ceil((imgOriginalSize.rh - $image.height()) /
+ parseFloat(config.magnifierOpts.fullscreenzoom));
+ }
+
+ if ($image.css('maxHeight') !== 'none') {
+ dimentions = {
+ maxHeight: 'none',
+ maxWidth: 'none'
+ };
+ }
+
+ widthResult = $image.width() + zoomWidthStep;
+ heightResult = $image.height() + zoomHeightStep;
+
+ if (widthResult >= imgOriginalSize.rw) {
+ widthResult = imgOriginalSize.rw;
+ }
+
+ if (heightResult >= imgOriginalSize.rh) {
+ heightResult = imgOriginalSize.rh;
+ }
+
+ if ($image.width() >= $image.height() && $image.width() !== imgOriginalSize.rw) {
+ dimentions = $.extend(dimentions, {
+ width: widthResult,
+ height: 'auto'
+ });
+ checkFullscreenImagePosition($image, dimentions, -zoomWidthStep, -zoomHeightStep);
+
+ } else if ($image.width() < $image.height() && $image.height() !== imgOriginalSize.rh) {
+ dimentions = $.extend(dimentions, {
+ width: 'auto',
+ height: heightResult
+ });
+ checkFullscreenImagePosition($image, dimentions, -zoomWidthStep, -zoomHeightStep);
+ }
+ }
+
+ return false;
+ }
+
+ function zoomOut(e) {
+ var $image, widthResult, heightResult, dimentions, parentWidth, parentHeight;
+
+ if (zoomShown) {
+ $image = $(fullscreenImageSelector);
+ widthResult = $image.width() - zoomWidthStep;
+ heightResult = $image.height() - zoomHeightStep;
+ parentWidth = $image.parent().width();
+ parentHeight = $image.parent().height();
+
+ e.preventDefault();
+
+ if (e.type === 'click' || e.type === 'touchstart') {
+ clickAnimation(e);
+ }
+
+ if ($image.width() > $image.height()) {
+ if (widthResult > parentWidth) {
+ dimentions = {
+ 'width': widthResult,
+ 'height': 'auto'
+ };
+ checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep);
+ } else {
+ if (heightResult > parentHeight) {
+ dimentions = {
+ 'width': widthResult,
+ 'height': 'auto'
+ };
+ checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep);
+ } else {
+ widthResult = parentWidth;
+ dimentions = {
+ 'width': widthResult,
+ 'height': 'auto'
+ };
+ checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep);
+ }
+ }
+
+ } else {
+ if (heightResult > parentHeight) {
+ dimentions = {
+ width: 'auto',
+ height: heightResult
+ };
+ checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep);
+ } else {
+ if (widthResult > parentWidth) {
+ dimentions = {
+ width: 'auto',
+ height: heightResult
+ };
+ checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep);
+ } else {
+ if (parentHeight < parentWidth) {
+ heightResult = parentHeight;
+ dimentions = {
+ width: 'auto',
+ height: heightResult
+ };
+ checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep);
+ } else {
+ widthResult = parentWidth;
+ dimentions = {
+ 'width': widthResult,
+ 'height': 'auto'
+ };
+ checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep);
+ }
+ }
+ }
+ }
+ }
+
+ return false;
+ }
+
+ /**
+ * Bind event on scroll on active item in fotorama
+ * @param e
+ * @param fotorama - object of fotorama
+ */
+ function mousewheel(e, fotorama, element) {
+ var $fotoramaStage = $(element).find('[data-fotorama-stage="fotorama__stage"]'),
+ fotoramaStage = $fotoramaStage.get(0);
+
+ function onWheel(e) {
+ var delta = e.deltaY || e.detail || e.wheelDelta;
+
+ if ($(gallerySelector).data('fotorama').fullScreen) {
+ e = e || window.event;
+
+ if (delta > 0) {
+ zoomOut(e);
+ } else {
+ zoomIn(e);
+ }
+
+ e.preventDefault ? e.preventDefault() : (e.returnValue = false);
+ }
+ }
+
+ if (!$fotoramaStage.hasClass('magnify-wheel-loaded')) {
+ if (fotoramaStage && fotoramaStage.addEventListener) {
+ if ('onwheel' in document) {
+ fotoramaStage.addEventListener('wheel', onWheel);
+ } else if ('onmousewheel' in document) {
+ fotoramaStage.addEventListener('mousewheel', onWheel);
+ } else {
+ fotoramaStage.addEventListener('MozMousePixelScroll', onWheel);
+ }
+ $fotoramaStage.addClass('magnify-wheel-loaded');
+ }
+ }
+ }
+
+ /**
+ * Metod which makes draggable picture. Also work on touch devices.
+ */
+ function magnifierFullscreen() {
+ var isDragActive = false,
+ startX,
+ startY,
+ imagePosX,
+ imagePosY,
+ touch,
+ $gallery = $(gallerySelector),
+ $image = $(fullscreenImageSelector, $gallery),
+ $imageContainer = $('[data-gallery-role="stage-shaft"] [data-active="true"]'),
+ gallery = $gallery.data('fotorama');
+
+ function shiftImage(dx, dy) {
+ var top = +imagePosY + dy;
+ var left = +imagePosX + dx;
+
+ if ($image.height() > $imageContainer.height()) {
+
+ if (($imageContainer.offset().top + $imageContainer.height()) > (top + $image.height())) {
+ top = $imageContainer.offset().top + $imageContainer.height() - $image.height();
+ } else {
+ top = ($imageContainer.offset().top < top) ? 0 : top;
+ }
+ $image.offset({
+ 'top': top
+ });
+ }
+
+ if ($image.width() > $imageContainer.width()) {
+
+ if (($imageContainer.offset().left + $imageContainer.width()) > (left + $image.width())) {
+ left = $imageContainer.offset().left + $imageContainer.width() - $image.width();
+ } else {
+ left = ($imageContainer.offset().left < left) ? $imageContainer.offset().left : left;
+ }
+ $image.offset({
+ 'left': left
+ });
+ }
+ }
+
+ toggleZoomButtons($image);
+
+ $image.on(isTouchEnabled ? 'touchstart' : 'pointerdown mousedown MSPointerDown', function (e) {
+ if (gallery.fullScreen) {
+ e.preventDefault();
+
+ $image.css('cursor', 'move');
+ imagePosY = $image.offset().top;
+ imagePosX = $image.offset().left;
+
+ if (isTouchEnabled) {
+ touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
+ e.clientX = touch.pageX;
+ e.clientY = touch.pageY;
+ }
+ startX = e.clientX || e.originalEvent.clientX;
+ startY = e.clientY || e.originalEvent.clientY;
+ isDragActive = true;
+
+ $image.css({
+ transitionProperty: 'width, height'
+ });
+
+ }
+ });
+
+ $image.on(isTouchEnabled ? 'touchmove' : 'mousemove pointermove MSPointerMove', function (e) {
+ var top, left, clientX, clientY;
+
+ if (gallery.fullScreen && isDragActive) {
+
+ clientX = e.clientX || e.originalEvent.clientX;
+ clientY = e.clientY || e.originalEvent.clientY;
+
+ e.preventDefault();
+
+ if (isTouchEnabled) {
+ touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
+ e.clientX = touch.pageX;
+ e.clientY = touch.pageY;
+ }
+ shiftImage((clientX - startX), (clientY - startY));
+ }
+ });
+
+ $(window).keyup(function (e) {
+ imagePosX = $(fullscreenImageSelector, $gallery).offset().left;
+ imagePosY = $(fullscreenImageSelector, $gallery).offset().top;
+ var step = 20;
+
+ if (e.keyCode === 102) {
+ shiftImage(-step, 0);
+ }
+ if (e.keyCode === 98) {
+ shiftImage(0, step);
+ }
+ if (e.keyCode === 100) {
+ shiftImage(step, 0);
+ }
+ if (e.keyCode === 104) {
+ shiftImage(0, -step);
+ }
+
+ });
+
+ $image.on('transitionend', function() {
+ allowAnimating = true;
+ });
+
+ $(document).on(isTouchEnabled ? 'touchend' : 'mouseup pointerup MSPointerUp', function () {
+ if (gallery.fullScreen) {
+ isDragActive = false;
+ $image.css({
+ cursor: 'pointer',
+ transitionProperty: 'width, height, top, left'
+ });
+ }
+ });
+
+ $image.css({
+ width: $image.width(),
+ height: $image.height()
+ });
+ }
+
/**
* Hides magnifier preview and zoom blocks.
*/
@@ -39,7 +487,8 @@ define([
behaveOnHover = function (e, initPos) {
var pos = [e.pageX, e.pageY],
isArrow = $(e.target).data('gallery-role') === 'arrow',
- isClick = initPos[0] === pos[0] && initPos[1] === pos[1];
+ isClick = initPos[0] === pos[0] && initPos[1] === pos[1];
+
if (isArrow || !isClick) {
hideMagnifier();
}
@@ -50,7 +499,6 @@ define([
} else if (config.magnifierOpts.eventType === 'hover') {
$(element).on('pointerdown mousedown MSPointerDown', function (e) {
var pos = [e.pageX, e.pageY];
-
$(element).on('mousemove pointermove MSPointerMove', function (ev) {
navigator.msPointerEnabled ? hideMagnifier() : behaveOnHover(ev, pos);
});
@@ -62,7 +510,7 @@ define([
$.extend(config.magnifierOpts, {
zoomable: false,
- thumb: '.fotorama__img:not(".fotorama__img--full")',
+ thumb: '.fotorama__img',
largeWrapper: '[data-gallery-role="magnifier"]',
height: config.magnifierOpts.height || function () {
return $('[data-active="true"]').height();
@@ -80,18 +528,75 @@ define([
}
});
- $(element).on('fotorama:showend fotorama:load fotorama:fullscreenexit fotorama:ready', function (e, fotorama) {
+ $(element).on('fotorama:load fotorama:showend fotorama:fullscreenexit fotorama:ready', function (e, fotorama) {
hideMagnifier();
config.magnifierOpts.large = $(gallerySelector).data('fotorama').activeFrame.img;
- config.magnifierOpts.full = fotorama.data[fotorama.activeIndex].full;
+ config.magnifierOpts.full = fotorama.data[fotorama.activeIndex].original;
$($(gallerySelector).data('fotorama').activeFrame.$stageFrame).magnify(config.magnifierOpts);
});
- $(element).on('gallery:loaded', function () {
- $(element).find(gallerySelector).on('fotorama:show fotorama:fullscreenenter ', function () {
- hideMagnifier();
- });
+ $(element).on('gallery:loaded', function (e) {
+ $(element).find(gallerySelector)
+ .on('fotorama:ready', function (e, fotorama) {
+ var $zoomIn = $(zoomInButtonSelector),
+ $zoomOut = $(zoomOutButtonSelector);
+
+ if (!$zoomIn.hasClass('zoom-in-loaded')) {
+ $zoomIn.on('click touchstart', zoomIn);
+
+ $zoomIn.keyup(function (e) {
+
+ if (e.keyCode === 13) {
+ zoomIn(e);
+ }
+ });
+
+ $(window).keyup(function (e) {
+
+ if (e.keyCode === 107 || fotorama.fullscreen) {
+ zoomIn(e);
+ }
+ });
+
+ $zoomIn.addClass('zoom-in-loaded');
+ }
+
+ if (!$zoomOut.hasClass('zoom-out-loaded')) {
+ $zoomOut.on('click touchstart', zoomOut);
+
+ $zoomOut.keyup(function (e) {
+
+ if (e.keyCode === 13) {
+ zoomOut(e);
+ }
+ });
+
+ $(window).keyup(function (e) {
+
+ if (e.keyCode === 109 || fotorama.fullscreen) {
+ zoomOut(e);
+ }
+ });
+
+ $zoomOut.addClass('zoom-out-loaded');
+ }
+ })
+ .on('fotorama:fullscreenenter fotorama:showend', function (e, fotorama) {
+ hideMagnifier();
+ $(element).data('gallery').updateOptions({
+ swipe: false
+ });
+ magnifierFullscreen(e, fotorama);
+ mousewheel(e, fotorama, element);
+ })
+ .on('fotorama:load', function (e, fotorama) {
+ toggleZoomButtons($(fullscreenImageSelector));
+ magnifierFullscreen();
+ })
+ .on('fotorama:show', function (e, fotorama) {
+ resetVars($(fullscreenImageSelector));
+ });
});
return config;
- };
+ }
});