lightgallery 2.5.0-beta.5 → 2.6.0-beta.2

package/lib/plugins/zoom/lg-zoom.js

@@ -66,158 +66,50 @@ var Zoom = /** @class */ (function () {
         // Add zoomable class
         this.core.LGel.on(lg_events_1.lGEvents.slideItemLoad + ".zoom", this.enableZoom.bind(this));
     };
-    Zoom.prototype.getModifier = function (rotateValue, axis, el) {
-        var originalRotate = rotateValue;
-        rotateValue = Math.abs(rotateValue);
-        var transformValues = this.getCurrentTransform(el);
-        if (!transformValues) {
-            return 1;
-        }
-        var modifier = 1;
-        if (axis === 'X') {
-            var flipHorizontalValue = Math.sign(parseFloat(transformValues[0]));
-            if (rotateValue === 0 || rotateValue === 180) {
-                modifier = 1;
-            }
-            else if (rotateValue === 90) {
-                if ((originalRotate === -90 && flipHorizontalValue === 1) ||
-                    (originalRotate === 90 && flipHorizontalValue === -1)) {
-                    modifier = -1;
-                }
-                else {
-                    modifier = 1;
-                }
-            }
-            modifier = modifier * flipHorizontalValue;
-        }
-        else {
-            var flipVerticalValue = Math.sign(parseFloat(transformValues[3]));
-            if (rotateValue === 0 || rotateValue === 180) {
-                modifier = 1;
-            }
-            else if (rotateValue === 90) {
-                var sinX = parseFloat(transformValues[1]);
-                var sinMinusX = parseFloat(transformValues[2]);
-                modifier = Math.sign(sinX * sinMinusX * originalRotate * flipVerticalValue);
-            }
-            modifier = modifier * flipVerticalValue;
-        }
-        return modifier;
-    };
-    Zoom.prototype.getImageSize = function ($image, rotateValue, axis) {
-        var imageSizes = {
-            y: 'offsetHeight',
-            x: 'offsetWidth',
+    Zoom.prototype.getDragCords = function (e) {
+        return {
+            x: e.pageX,
+            y: e.pageY,
         };
-        if (Math.abs(rotateValue) === 90) {
-            // Swap axis
-            if (axis === 'x') {
-                axis = 'y';
-            }
-            else {
-                axis = 'x';
-            }
-        }
-        return $image[imageSizes[axis]];
-    };
-    Zoom.prototype.getDragCords = function (e, rotateValue) {
-        if (rotateValue === 90) {
-            return {
-                x: e.pageY,
-                y: e.pageX,
-            };
-        }
-        else {
-            return {
-                x: e.pageX,
-                y: e.pageY,
-            };
-        }
-    };
-    Zoom.prototype.getSwipeCords = function (e, rotateValue) {
-        var x = e.targetTouches[0].pageX;
-        var y = e.targetTouches[0].pageY;
-        if (rotateValue === 90) {
-            return {
-                x: y,
-                y: x,
-            };
-        }
-        else {
-            return {
-                x: x,
-                y: y,
-            };
-        }
-    };
-    Zoom.prototype.getDragAllowedAxises = function (rotateValue, scale) {
-        scale = scale || this.scale || 1;
-        var allowY = this.imageYSize * scale > this.containerRect.height;
-        var allowX = this.imageXSize * scale > this.containerRect.width;
-        if (rotateValue === 90) {
-            return {
-                allowX: allowY,
-                allowY: allowX,
-            };
-        }
-        else {
-            return {
-                allowX: allowX,
-                allowY: allowY,
-            };
-        }
     };
-    /**
-     *
-     * @param {Element} el
-     * @return matrix(cos(X), sin(X), -sin(X), cos(X), 0, 0);
-     * Get the current transform value
-     */
-    Zoom.prototype.getCurrentTransform = function (el) {
-        if (!el) {
-            return;
-        }
-        var st = window.getComputedStyle(el, null);
-        var tm = st.getPropertyValue('-webkit-transform') ||
-            st.getPropertyValue('-moz-transform') ||
-            st.getPropertyValue('-ms-transform') ||
-            st.getPropertyValue('-o-transform') ||
-            st.getPropertyValue('transform') ||
-            'none';
-        if (tm !== 'none') {
-            return tm.split('(')[1].split(')')[0].split(',');
-        }
-        return;
-    };
-    Zoom.prototype.getCurrentRotation = function (el) {
-        if (!el) {
-            return 0;
-        }
-        var values = this.getCurrentTransform(el);
-        if (values) {
-            return Math.round(Math.atan2(parseFloat(values[1]), parseFloat(values[0])) *
-                (180 / Math.PI));
-            // If you want rotate in 360
-            //return (angle < 0 ? angle + 360 : angle);
-        }
-        return 0;
+    Zoom.prototype.getSwipeCords = function (e) {
+        var x = e.touches[0].pageX;
+        var y = e.touches[0].pageY;
+        return {
+            x: x,
+            y: y,
+        };
     };
-    Zoom.prototype.setZoomEssentials = function () {
+    Zoom.prototype.getDragAllowedAxises = function (scale, scaleDiff) {
         var $image = this.core
             .getSlideItem(this.core.index)
             .find('.lg-image')
-            .first();
-        var rotateEl = this.core
-            .getSlideItem(this.core.index)
-            .find('.lg-img-rotate')
             .first()
             .get();
-        this.rotateValue = this.getCurrentRotation(rotateEl);
-        this.imageYSize = this.getImageSize($image.get(), this.rotateValue, 'y');
-        this.imageXSize = this.getImageSize($image.get(), this.rotateValue, 'x');
-        this.containerRect = this.core.outer.get().getBoundingClientRect();
-        this.modifierX = this.getModifier(this.rotateValue, 'X', rotateEl);
-        this.modifierY = this.getModifier(this.rotateValue, 'Y', rotateEl);
+        var height = 0;
+        var width = 0;
+        var rect = $image.getBoundingClientRect();
+        if (scale) {
+            height = $image.offsetHeight * scale;
+            width = $image.offsetWidth * scale;
+        }
+        else if (scaleDiff) {
+            height = rect.height + scaleDiff * rect.height;
+            width = rect.width + scaleDiff * rect.width;
+        }
+        else {
+            height = rect.height;
+            width = rect.width;
+        }
+        var allowY = height > this.containerRect.height;
+        var allowX = width > this.containerRect.width;
+        return {
+            allowX: allowX,
+            allowY: allowY,
+        };
+    };
+    Zoom.prototype.setZoomEssentials = function () {
+        this.containerRect = this.core.$content.get().getBoundingClientRect();
     };
     /**
      * @desc Image zoom
@@ -225,86 +117,152 @@ var Zoom = /** @class */ (function () {
      *
      * @param {String} scale - Zoom decrement/increment value
      */
-    Zoom.prototype.zoomImage = function (scale) {
-        // Find offset manually to avoid issue after zoom
-        var offsetX = (this.containerRect.width - this.imageXSize) / 2 +
-            this.containerRect.left;
-        var _a = this.core.mediaContainerPosition, top = _a.top, bottom = _a.bottom;
-        var topBottomSpacing = Math.abs(top - bottom) / 2;
-        var offsetY = (this.containerRect.height -
-            this.imageYSize -
-            topBottomSpacing * this.modifierX) /
-            2 +
-            this.scrollTop +
-            this.containerRect.top;
+    Zoom.prototype.zoomImage = function (scale, scaleDiff, reposition, resetToMax) {
+        if (Math.abs(scaleDiff) <= 0)
+            return;
+        var offsetX = this.containerRect.width / 2 + this.containerRect.left;
+        var offsetY = this.containerRect.height / 2 +
+            this.containerRect.top +
+            this.scrollTop;
         var originalX;
         var originalY;
         if (scale === 1) {
             this.positionChanged = false;
         }
-        var dragAllowedAxises = this.getDragAllowedAxises(Math.abs(this.rotateValue), scale);
+        var dragAllowedAxises = this.getDragAllowedAxises(0, scaleDiff);
         var allowY = dragAllowedAxises.allowY, allowX = dragAllowedAxises.allowX;
         if (this.positionChanged) {
-            originalX = this.left / (this.scale - 1);
-            originalY = this.top / (this.scale - 1);
-            this.pageX = Math.abs(originalX) + offsetX;
-            this.pageY = Math.abs(originalY) + offsetY;
+            originalX = this.left / (this.scale - scaleDiff);
+            originalY = this.top / (this.scale - scaleDiff);
+            this.pageX = offsetX - originalX;
+            this.pageY = offsetY - originalY;
             this.positionChanged = false;
         }
-        var possibleSwipeCords = this.getPossibleSwipeDragCords(this.rotateValue, scale);
+        var possibleSwipeCords = this.getPossibleSwipeDragCords(scaleDiff);
+        var x;
+        var y;
         var _x = offsetX - this.pageX;
         var _y = offsetY - this.pageY;
-        var x = (scale - 1) * _x;
-        var y = (scale - 1) * _y;
-        if (allowX) {
-            if (this.isBeyondPossibleLeft(x, possibleSwipeCords.minX)) {
-                x = possibleSwipeCords.minX;
-            }
-            else if (this.isBeyondPossibleRight(x, possibleSwipeCords.maxX)) {
-                x = possibleSwipeCords.maxX;
-            }
+        if (scale - scaleDiff > 1) {
+            var scaleVal = (scale - scaleDiff) / Math.abs(scaleDiff);
+            _x =
+                (scaleDiff < 0 ? -_x : _x) +
+                    this.left * (scaleVal + (scaleDiff < 0 ? -1 : 1));
+            _y =
+                (scaleDiff < 0 ? -_y : _y) +
+                    this.top * (scaleVal + (scaleDiff < 0 ? -1 : 1));
+            x = _x / scaleVal;
+            y = _y / scaleVal;
         }
         else {
-            if (scale > 1) {
-                if (x < possibleSwipeCords.minX) {
+            var scaleVal = (scale - scaleDiff) * scaleDiff;
+            x = _x * scaleVal;
+            y = _y * scaleVal;
+        }
+        if (reposition) {
+            if (allowX) {
+                if (this.isBeyondPossibleLeft(x, possibleSwipeCords.minX)) {
                     x = possibleSwipeCords.minX;
                 }
-                else if (x > possibleSwipeCords.maxX) {
+                else if (this.isBeyondPossibleRight(x, possibleSwipeCords.maxX)) {
                     x = possibleSwipeCords.maxX;
                 }
             }
-        }
-        if (allowY) {
-            if (this.isBeyondPossibleTop(y, possibleSwipeCords.minY)) {
-                y = possibleSwipeCords.minY;
-            }
-            else if (this.isBeyondPossibleBottom(y, possibleSwipeCords.maxY)) {
-                y = possibleSwipeCords.maxY;
+            else {
+                if (scale > 1) {
+                    if (x < possibleSwipeCords.minX) {
+                        x = possibleSwipeCords.minX;
+                    }
+                    else if (x > possibleSwipeCords.maxX) {
+                        x = possibleSwipeCords.maxX;
+                    }
+                }
             }
-        }
-        else {
-            // If the translate value based on index of beyond the viewport, utilize the available space to prevent image being cut out
-            if (scale > 1) {
-                //If image goes beyond viewport top, use the minim possible translate value
-                if (y < possibleSwipeCords.minY) {
+            // @todo fix this
+            if (allowY) {
+                if (this.isBeyondPossibleTop(y, possibleSwipeCords.minY)) {
                     y = possibleSwipeCords.minY;
                 }
-                else if (y > possibleSwipeCords.maxY) {
+                else if (this.isBeyondPossibleBottom(y, possibleSwipeCords.maxY)) {
                     y = possibleSwipeCords.maxY;
                 }
             }
+            else {
+                // If the translate value based on index of beyond the viewport, utilize the available space to prevent image being cut out
+                if (scale > 1) {
+                    //If image goes beyond viewport top, use the minim possible translate value
+                    if (y < possibleSwipeCords.minY) {
+                        y = possibleSwipeCords.minY;
+                    }
+                    else if (y > possibleSwipeCords.maxY) {
+                        y = possibleSwipeCords.maxY;
+                    }
+                }
+            }
         }
         this.setZoomStyles({
             x: x,
             y: y,
             scale: scale,
         });
+        this.left = x;
+        this.top = y;
+        if (resetToMax) {
+            var actualSizeScale = this.getCurrentImageActualSizeScale();
+            if (scale >= actualSizeScale) {
+                this.setZoomImageSize();
+            }
+        }
+    };
+    Zoom.prototype.resetImageTranslate = function () {
+        var $image = this.core
+            .getSlideItem(this.core.index)
+            .find('.lg-image')
+            .first();
+        this.imageReset = false;
+        $image.removeClass('reset-transition reset-transition-y reset-transition-x');
+        this.core.outer.removeClass('lg-actual-size');
+        $image.css('width', 'auto').css('height', 'auto');
+        setTimeout(function () {
+            $image.removeClass('no-transition');
+        }, 10);
+    };
+    Zoom.prototype.setZoomImageSize = function () {
+        var _this = this;
+        var $image = this.core
+            .getSlideItem(this.core.index)
+            .find('.lg-image')
+            .first();
+        setTimeout(function () {
+            $image.addClass('no-transition');
+            _this.imageReset = true;
+        }, 500);
+        setTimeout(function () {
+            var dragAllowedAxises = _this.getDragAllowedAxises(_this.scale);
+            $image
+                .css('width', $image.get().naturalWidth + 'px')
+                .css('height', $image.get().naturalHeight + 'px');
+            _this.core.outer.addClass('lg-actual-size');
+            if (dragAllowedAxises.allowX && dragAllowedAxises.allowY) {
+                $image.addClass('reset-transition');
+            }
+            else if (dragAllowedAxises.allowX && !dragAllowedAxises.allowY) {
+                $image.addClass('reset-transition-x');
+            }
+            else if (!dragAllowedAxises.allowX && dragAllowedAxises.allowY) {
+                $image.addClass('reset-transition-y');
+            }
+        }, 550);
     };
     /**
      * @desc apply scale3d to image and translate to image wrap
      * @param {style} X,Y and scale
      */
     Zoom.prototype.setZoomStyles = function (style) {
+        var $imageWrap = this.core
+            .getSlideItem(this.core.index)
+            .find('.lg-img-wrap')
+            .first();
         var $image = this.core
             .getSlideItem(this.core.index)
             .find('.lg-image')
@@ -312,14 +270,11 @@ var Zoom = /** @class */ (function () {
         var $dummyImage = this.core.outer
             .find('.lg-current .lg-dummy-img')
             .first();
-        var $imageWrap = $image.parent();
         this.scale = style.scale;
         $image.css('transform', 'scale3d(' + style.scale + ', ' + style.scale + ', 1)');
         $dummyImage.css('transform', 'scale3d(' + style.scale + ', ' + style.scale + ', 1)');
         var transform = 'translate3d(' + style.x + 'px, ' + style.y + 'px, 0)';
         $imageWrap.css('transform', transform);
-        this.left = style.x;
-        this.top = style.y;
     };
     /**
      * @param index - Index of the current slide
@@ -327,24 +282,29 @@ var Zoom = /** @class */ (function () {
      */
     Zoom.prototype.setActualSize = function (index, event) {
         var _this = this;
-        // Allow zoom only on image
-        if (!this.isImageSlide() ||
-            this.core.outer.hasClass('lg-first-slide-loading')) {
-            return;
-        }
-        var scale = this.getCurrentImageActualSizeScale();
-        if (this.core.outer.hasClass('lg-zoomed')) {
-            this.scale = 1;
-        }
-        else {
-            this.scale = this.getScale(scale);
-        }
-        this.setPageCords(event);
-        this.beginZoom(this.scale);
-        this.zoomImage(this.scale);
+        var currentItem = this.core.galleryItems[this.core.index];
+        this.resetImageTranslate();
         setTimeout(function () {
-            _this.core.outer.removeClass('lg-grabbing').addClass('lg-grab');
-        }, 10);
+            // Allow zoom only on image
+            if (!currentItem.src ||
+                _this.core.outer.hasClass('lg-first-slide-loading')) {
+                return;
+            }
+            var scale = _this.getCurrentImageActualSizeScale();
+            var prevScale = _this.scale;
+            if (_this.core.outer.hasClass('lg-zoomed')) {
+                _this.scale = 1;
+            }
+            else {
+                _this.scale = _this.getScale(scale);
+            }
+            _this.setPageCords(event);
+            _this.beginZoom(_this.scale);
+            _this.zoomImage(_this.scale, _this.scale - prevScale, true, true);
+            setTimeout(function () {
+                _this.core.outer.removeClass('lg-grabbing').addClass('lg-grab');
+            }, 10);
+        }, 50);
     };
     Zoom.prototype.getNaturalWidth = function (index) {
         var $image = this.core.getSlideItem(index).find('.lg-image').first();
@@ -356,7 +316,7 @@ var Zoom = /** @class */ (function () {
     Zoom.prototype.getActualSizeScale = function (naturalWidth, width) {
         var _scale;
         var scale;
-        if (naturalWidth > width) {
+        if (naturalWidth >= width) {
             _scale = naturalWidth / width;
             scale = _scale || 2;
         }
@@ -377,11 +337,13 @@ var Zoom = /** @class */ (function () {
     Zoom.prototype.getPageCords = function (event) {
         var cords = {};
         if (event) {
-            cords.x = event.pageX || event.targetTouches[0].pageX;
-            cords.y = event.pageY || event.targetTouches[0].pageY;
+            cords.x = event.pageX || event.touches[0].pageX;
+            cords.y = event.pageY || event.touches[0].pageY;
         }
         else {
-            var containerRect = this.core.outer.get().getBoundingClientRect();
+            var containerRect = this.core.$content
+                .get()
+                .getBoundingClientRect();
             cords.x = containerRect.width / 2 + containerRect.left;
             cords.y =
                 containerRect.height / 2 + this.scrollTop + containerRect.top;
@@ -393,15 +355,18 @@ var Zoom = /** @class */ (function () {
         this.pageX = pageCords.x;
         this.pageY = pageCords.y;
     };
+    Zoom.prototype.manageActualPixelClassNames = function () {
+        var $actualSize = this.core.getElementById('lg-actual-size');
+        $actualSize
+            .removeClass(this.settings.actualSizeIcons.zoomIn)
+            .addClass(this.settings.actualSizeIcons.zoomOut);
+    };
     // If true, zoomed - in else zoomed out
     Zoom.prototype.beginZoom = function (scale) {
         this.core.outer.removeClass('lg-zoom-drag-transition lg-zoom-dragging');
         if (scale > 1) {
             this.core.outer.addClass('lg-zoomed');
-            var $actualSize = this.core.getElementById('lg-actual-size');
-            $actualSize
-                .removeClass(this.settings.actualSizeIcons.zoomIn)
-                .addClass(this.settings.actualSizeIcons.zoomOut);
+            this.manageActualPixelClassNames();
         }
         else {
             this.resetZoom();
@@ -434,8 +399,7 @@ var Zoom = /** @class */ (function () {
         });
         this.core.outer.on('touchstart.lg', function (event) {
             var $target = _this.$LG(event.target);
-            if (event.targetTouches.length === 1 &&
-                $target.hasClass('lg-image')) {
+            if (event.touches.length === 1 && $target.hasClass('lg-image')) {
                 if (!tapped) {
                     tapped = setTimeout(function () {
                         tapped = null;
@@ -449,13 +413,21 @@ var Zoom = /** @class */ (function () {
                 }
             }
         });
-        // Update zoom on resize and orientationchange
         this.core.LGel.on(lg_events_1.lGEvents.containerResize + ".zoom " + lg_events_1.lGEvents.rotateRight + ".zoom " + lg_events_1.lGEvents.rotateLeft + ".zoom " + lg_events_1.lGEvents.flipHorizontal + ".zoom " + lg_events_1.lGEvents.flipVertical + ".zoom", function () {
-            if (!_this.core.lgOpened || !_this.isImageSlide())
+            if (!_this.core.lgOpened ||
+                !_this.isImageSlide() ||
+                _this.core.touchAction) {
                 return;
-            _this.setPageCords();
+            }
+            var _LGel = _this.core
+                .getSlideItem(_this.core.index)
+                .find('.lg-img-wrap')
+                .first();
+            _this.top = 0;
+            _this.left = 0;
             _this.setZoomEssentials();
-            _this.zoomImage(_this.scale);
+            _this.setZoomSwipeStyles(_LGel, { x: 0, y: 0 });
+            _this.positionChanged = true;
         });
         // Update zoom on resize and orientationchange
         this.$LG(window).on("scroll.lg.zoom.global" + this.core.lgId, function () {
@@ -464,12 +436,23 @@ var Zoom = /** @class */ (function () {
             _this.scrollTop = _this.$LG(window).scrollTop();
         });
         this.core.getElementById('lg-zoom-out').on('click.lg', function () {
-            if (_this.core.outer.find('.lg-current .lg-image').get()) {
-                _this.scale -= _this.settings.scale;
-                _this.scale = _this.getScale(_this.scale);
-                _this.beginZoom(_this.scale);
-                _this.zoomImage(_this.scale);
+            // Allow zoom only on image
+            if (!_this.isImageSlide()) {
+                return;
             }
+            var timeout = 0;
+            if (_this.imageReset) {
+                _this.resetImageTranslate();
+                timeout = 50;
+            }
+            setTimeout(function () {
+                var scale = _this.scale - _this.settings.scale;
+                if (scale < 1) {
+                    scale = 1;
+                }
+                _this.beginZoom(scale);
+                _this.zoomImage(scale, -_this.settings.scale, true, true);
+            }, timeout);
         });
         this.core.getElementById('lg-zoom-in').on('click.lg', function () {
             _this.zoomIn();
@@ -505,20 +488,15 @@ var Zoom = /** @class */ (function () {
         this.zoomableTimeout = false;
         this.positionChanged = false;
     };
-    Zoom.prototype.zoomIn = function (scale) {
+    Zoom.prototype.zoomIn = function () {
         // Allow zoom only on image
         if (!this.isImageSlide()) {
             return;
         }
-        if (scale) {
-            this.scale = scale;
-        }
-        else {
-            this.scale += this.settings.scale;
-        }
-        this.scale = this.getScale(this.scale);
-        this.beginZoom(this.scale);
-        this.zoomImage(this.scale);
+        var scale = this.scale + this.settings.scale;
+        scale = this.getScale(scale);
+        this.beginZoom(scale);
+        this.zoomImage(scale, this.settings.scale, true, true);
     };
     // Reset zoom effect
     Zoom.prototype.resetZoom = function (index) {
@@ -537,34 +515,38 @@ var Zoom = /** @class */ (function () {
         this.setPageCords();
     };
     Zoom.prototype.getTouchDistance = function (e) {
-        return Math.sqrt((e.targetTouches[0].pageX - e.targetTouches[1].pageX) *
-            (e.targetTouches[0].pageX - e.targetTouches[1].pageX) +
-            (e.targetTouches[0].pageY - e.targetTouches[1].pageY) *
-                (e.targetTouches[0].pageY - e.targetTouches[1].pageY));
+        return Math.sqrt((e.touches[0].pageX - e.touches[1].pageX) *
+            (e.touches[0].pageX - e.touches[1].pageX) +
+            (e.touches[0].pageY - e.touches[1].pageY) *
+                (e.touches[0].pageY - e.touches[1].pageY));
     };
     Zoom.prototype.pinchZoom = function () {
         var _this = this;
         var startDist = 0;
         var pinchStarted = false;
         var initScale = 1;
+        var prevScale = 0;
         var $item = this.core.getSlideItem(this.core.index);
-        this.core.$inner.on('touchstart.lg', function (e) {
+        this.core.outer.on('touchstart.lg', function (e) {
             $item = _this.core.getSlideItem(_this.core.index);
             if (!_this.isImageSlide()) {
                 return;
             }
-            if (e.targetTouches.length === 2 &&
-                !_this.core.outer.hasClass('lg-first-slide-loading') &&
-                (_this.$LG(e.target).hasClass('lg-item') ||
-                    $item.get().contains(e.target))) {
+            if (e.touches.length === 2) {
+                e.preventDefault();
+                if (_this.core.outer.hasClass('lg-first-slide-loading')) {
+                    return;
+                }
                 initScale = _this.scale || 1;
                 _this.core.outer.removeClass('lg-zoom-drag-transition lg-zoom-dragging');
+                _this.setPageCords(e);
+                _this.resetImageTranslate();
                 _this.core.touchAction = 'pinch';
                 startDist = _this.getTouchDistance(e);
             }
         });
         this.core.$inner.on('touchmove.lg', function (e) {
-            if (e.targetTouches.length === 2 &&
+            if (e.touches.length === 2 &&
                 _this.core.touchAction === 'pinch' &&
                 (_this.$LG(e.target).hasClass('lg-item') ||
                     $item.get().contains(e.target))) {
@@ -575,8 +557,12 @@ var Zoom = /** @class */ (function () {
                     pinchStarted = true;
                 }
                 if (pinchStarted) {
-                    _this.scale = Math.max(1, initScale + -distance * 0.008);
-                    _this.zoomImage(_this.scale);
+                    prevScale = _this.scale;
+                    var _scale = Math.max(1, initScale + -distance * 0.02);
+                    _this.scale =
+                        Math.round((_scale + Number.EPSILON) * 100) / 100;
+                    var diff = _this.scale - prevScale;
+                    _this.zoomImage(_this.scale, Math.round((diff + Number.EPSILON) * 100) / 100, false, false);
                 }
             }
         });
@@ -590,15 +576,22 @@ var Zoom = /** @class */ (function () {
                     _this.resetZoom();
                 }
                 else {
-                    _this.scale = _this.getScale(_this.scale);
-                    _this.zoomImage(_this.scale);
+                    var actualSizeScale = _this.getCurrentImageActualSizeScale();
+                    if (_this.scale >= actualSizeScale) {
+                        var scaleDiff = actualSizeScale - _this.scale;
+                        if (scaleDiff === 0) {
+                            scaleDiff = 0.01;
+                        }
+                        _this.zoomImage(actualSizeScale, scaleDiff, false, true);
+                    }
+                    _this.manageActualPixelClassNames();
                     _this.core.outer.addClass('lg-zoomed');
                 }
                 _this.core.touchAction = undefined;
             }
         });
     };
-    Zoom.prototype.touchendZoom = function (startCoords, endCoords, allowX, allowY, touchDuration, rotateValue) {
+    Zoom.prototype.touchendZoom = function (startCoords, endCoords, allowX, allowY, touchDuration) {
         var distanceXnew = endCoords.x - startCoords.x;
         var distanceYnew = endCoords.y - startCoords.y;
         var speedX = Math.abs(distanceXnew) / touchDuration + 1;
@@ -616,9 +609,9 @@ var Zoom = /** @class */ (function () {
             .find('.lg-img-wrap')
             .first();
         var distance = {};
-        distance.x = this.left + distanceXnew * this.modifierX;
-        distance.y = this.top + distanceYnew * this.modifierY;
-        var possibleSwipeCords = this.getPossibleSwipeDragCords(rotateValue);
+        distance.x = this.left + distanceXnew;
+        distance.y = this.top + distanceYnew;
+        var possibleSwipeCords = this.getPossibleSwipeDragCords();
         if (Math.abs(distanceXnew) > 15 || Math.abs(distanceYnew) > 15) {
             if (allowY) {
                 if (this.isBeyondPossibleTop(distance.y, possibleSwipeCords.minY)) {
@@ -655,8 +648,7 @@ var Zoom = /** @class */ (function () {
     Zoom.prototype.getZoomSwipeCords = function (startCoords, endCoords, allowX, allowY, possibleSwipeCords) {
         var distance = {};
         if (allowY) {
-            distance.y =
-                this.top + (endCoords.y - startCoords.y) * this.modifierY;
+            distance.y = this.top + (endCoords.y - startCoords.y);
             if (this.isBeyondPossibleTop(distance.y, possibleSwipeCords.minY)) {
                 var diffMinY = possibleSwipeCords.minY - distance.y;
                 distance.y = possibleSwipeCords.minY - diffMinY / 6;
@@ -670,8 +662,7 @@ var Zoom = /** @class */ (function () {
             distance.y = this.top;
         }
         if (allowX) {
-            distance.x =
-                this.left + (endCoords.x - startCoords.x) * this.modifierX;
+            distance.x = this.left + (endCoords.x - startCoords.x);
             if (this.isBeyondPossibleLeft(distance.x, possibleSwipeCords.minX)) {
                 var diffMinX = possibleSwipeCords.minX - distance.x;
                 distance.x = possibleSwipeCords.minX - diffMinX / 6;
@@ -702,30 +693,29 @@ var Zoom = /** @class */ (function () {
         var currentItem = this.core.galleryItems[this.core.index];
         return this.core.getSlideType(currentItem) === 'image';
     };
-    Zoom.prototype.getPossibleSwipeDragCords = function (rotateValue, scale) {
-        var dataScale = scale || this.scale || 1;
-        var elDataScale = Math.abs(dataScale);
-        var _a = this.core.mediaContainerPosition, top = _a.top, bottom = _a.bottom;
-        var topBottomSpacing = Math.abs(top - bottom) / 2;
-        var minY = (this.imageYSize - this.containerRect.height) / 2 +
-            topBottomSpacing * this.modifierX;
-        var maxY = this.containerRect.height - this.imageYSize * elDataScale + minY;
-        var minX = (this.imageXSize - this.containerRect.width) / 2;
-        var maxX = this.containerRect.width - this.imageXSize * elDataScale + minX;
+    Zoom.prototype.getPossibleSwipeDragCords = function (scale) {
+        var $image = this.core
+            .getSlideItem(this.core.index)
+            .find('.lg-image')
+            .first();
+        var bottom = this.core.mediaContainerPosition.bottom;
+        var imgRect = $image.get().getBoundingClientRect();
+        var imageHeight = imgRect.height;
+        var imageWidth = imgRect.width;
+        if (scale) {
+            imageHeight = imageHeight + scale * imageHeight;
+            imageWidth = imageWidth + scale * imageWidth;
+        }
+        var minY = (imageHeight - this.containerRect.height) / 2;
+        var maxY = (this.containerRect.height - imageHeight) / 2 + bottom;
+        var minX = (imageWidth - this.containerRect.width) / 2;
+        var maxX = (this.containerRect.width - imageWidth) / 2;
         var possibleSwipeCords = {
             minY: minY,
             maxY: maxY,
             minX: minX,
             maxX: maxX,
         };
-        if (Math.abs(rotateValue) === 90) {
-            possibleSwipeCords = {
-                minY: minX,
-                maxY: maxX,
-                minX: minY,
-                maxX: maxY,
-            };
-        }
         return possibleSwipeCords;
     };
     Zoom.prototype.setZoomSwipeStyles = function (LGel, distance) {
@@ -753,7 +743,7 @@ var Zoom = /** @class */ (function () {
             $item = _this.core.getSlideItem(_this.core.index);
             if ((_this.$LG(e.target).hasClass('lg-item') ||
                 $item.get().contains(e.target)) &&
-                e.targetTouches.length === 1 &&
+                e.touches.length === 1 &&
                 _this.core.outer.hasClass('lg-zoomed')) {
                 e.preventDefault();
                 startTime = new Date();
@@ -762,25 +752,25 @@ var Zoom = /** @class */ (function () {
                     .getSlideItem(_this.core.index)
                     .find('.lg-img-wrap')
                     .first();
-                var dragAllowedAxises = _this.getDragAllowedAxises(Math.abs(_this.rotateValue));
+                var dragAllowedAxises = _this.getDragAllowedAxises(0);
                 allowY = dragAllowedAxises.allowY;
                 allowX = dragAllowedAxises.allowX;
                 if (allowX || allowY) {
-                    startCoords = _this.getSwipeCords(e, Math.abs(_this.rotateValue));
+                    startCoords = _this.getSwipeCords(e);
                 }
-                possibleSwipeCords = _this.getPossibleSwipeDragCords(_this.rotateValue);
+                possibleSwipeCords = _this.getPossibleSwipeDragCords();
                 // reset opacity and transition duration
                 _this.core.outer.addClass('lg-zoom-dragging lg-zoom-drag-transition');
             }
         });
         this.core.$inner.on('touchmove.lg', function (e) {
-            if (e.targetTouches.length === 1 &&
+            if (e.touches.length === 1 &&
                 _this.core.touchAction === 'zoomSwipe' &&
                 (_this.$LG(e.target).hasClass('lg-item') ||
                     $item.get().contains(e.target))) {
                 e.preventDefault();
                 _this.core.touchAction = 'zoomSwipe';
-                endCoords = _this.getSwipeCords(e, Math.abs(_this.rotateValue));
+                endCoords = _this.getSwipeCords(e);
                 var distance = _this.getZoomSwipeCords(startCoords, endCoords, allowX, allowY, possibleSwipeCords);
                 if (Math.abs(endCoords.x - startCoords.x) > 15 ||
                     Math.abs(endCoords.y - startCoords.y) > 15) {
@@ -793,6 +783,7 @@ var Zoom = /** @class */ (function () {
             if (_this.core.touchAction === 'zoomSwipe' &&
                 (_this.$LG(e.target).hasClass('lg-item') ||
                     $item.get().contains(e.target))) {
+                e.preventDefault();
                 _this.core.touchAction = undefined;
                 _this.core.outer.removeClass('lg-zoom-dragging');
                 if (!isMoved) {
@@ -801,7 +792,7 @@ var Zoom = /** @class */ (function () {
                 isMoved = false;
                 endTime = new Date();
                 var touchDuration = endTime.valueOf() - startTime.valueOf();
-                _this.touchendZoom(startCoords, endCoords, allowX, allowY, touchDuration, _this.rotateValue);
+                _this.touchendZoom(startCoords, endCoords, allowX, allowY, touchDuration);
             }
         });
     };
@@ -832,19 +823,16 @@ var Zoom = /** @class */ (function () {
                     .getSlideItem(_this.core.index)
                     .find('.lg-img-wrap')
                     .first();
-                var dragAllowedAxises = _this.getDragAllowedAxises(Math.abs(_this.rotateValue));
+                var dragAllowedAxises = _this.getDragAllowedAxises(0);
                 allowY = dragAllowedAxises.allowY;
                 allowX = dragAllowedAxises.allowX;
                 if (_this.core.outer.hasClass('lg-zoomed')) {
                     if (_this.$LG(e.target).hasClass('lg-object') &&
                         (allowX || allowY)) {
                         e.preventDefault();
-                        startCoords = _this.getDragCords(e, Math.abs(_this.rotateValue));
-                        possibleSwipeCords = _this.getPossibleSwipeDragCords(_this.rotateValue);
+                        startCoords = _this.getDragCords(e);
+                        possibleSwipeCords = _this.getPossibleSwipeDragCords();
                         isDragging = true;
-                        // ** Fix for webkit cursor issue https://code.google.com/p/chromium/issues/detail?id=26723
-                        _this.core.outer.get().scrollLeft += 1;
-                        _this.core.outer.get().scrollLeft -= 1;
                         _this.core.outer
                             .removeClass('lg-grab')
                             .addClass('lg-grabbing lg-zoom-drag-transition lg-zoom-dragging');
@@ -856,7 +844,7 @@ var Zoom = /** @class */ (function () {
         this.$LG(window).on("mousemove.lg.zoom.global" + this.core.lgId, function (e) {
             if (isDragging) {
                 isMoved = true;
-                endCoords = _this.getDragCords(e, Math.abs(_this.rotateValue));
+                endCoords = _this.getDragCords(e);
                 var distance = _this.getZoomSwipeCords(startCoords, endCoords, allowX, allowY, possibleSwipeCords);
                 _this.setZoomSwipeStyles(_LGel, distance);
             }
@@ -870,9 +858,9 @@ var Zoom = /** @class */ (function () {
                 if (isMoved &&
                     (startCoords.x !== endCoords.x ||
                         startCoords.y !== endCoords.y)) {
-                    endCoords = _this.getDragCords(e, Math.abs(_this.rotateValue));
+                    endCoords = _this.getDragCords(e);
                     var touchDuration = endTime.valueOf() - startTime.valueOf();
-                    _this.touchendZoom(startCoords, endCoords, allowX, allowY, touchDuration, _this.rotateValue);
+                    _this.touchendZoom(startCoords, endCoords, allowX, allowY, touchDuration);
                 }
                 isMoved = false;
             }