diff --git a/src/Carousel/Carousel.js b/src/Carousel/Carousel.js index 716f1eb..744d184 100644 --- a/src/Carousel/Carousel.js +++ b/src/Carousel/Carousel.js @@ -429,7 +429,7 @@ export class Carousel extends Base { // Disable dragging if content (e.g. all slides) fits inside viewport panOnlyZoomed: function () { - return this.content.width < this.viewport.width; + return this.content.width <= this.viewport.width; }, }, this.option("Panzoom") diff --git a/src/Fancybox/plugins/Image/Image.scss b/src/Fancybox/plugins/Image/Image.scss index 5892321..055c0bf 100644 --- a/src/Fancybox/plugins/Image/Image.scss +++ b/src/Fancybox/plugins/Image/Image.scss @@ -2,6 +2,7 @@ transform-origin: 0 0; touch-action: none; user-select: none; + transition: unset; } .has-image { diff --git a/src/Panzoom/Panzoom.js b/src/Panzoom/Panzoom.js index 963b3e0..66da768 100644 --- a/src/Panzoom/Panzoom.js +++ b/src/Panzoom/Panzoom.js @@ -398,8 +398,10 @@ export class Panzoom extends Base { // Disable touch action if current zoom level is below base level if ( currentPointers.length < 2 && - this.transform.scale === this.option("baseScale") && - this.option("panOnlyZoomed") == true + this.option("panOnlyZoomed") == true && + this.content.width <= this.viewport.width && + this.content.height <= this.viewport.height && + this.transform.scale <= this.option("baseScale") ) { return; } @@ -473,10 +475,10 @@ export class Panzoom extends Base { this.dragPosition.y -= deltaY; this.dragPosition.midPoint = newMidpoint; + } else { + this.setDragResistance(); } - this.setDragResistance(); - // Update final position this.transform = { x: this.dragPosition.x, @@ -1159,7 +1161,8 @@ export class Panzoom extends Base { if ( this.option("panOnlyZoomed") == true && - this.content.width <= this.content.fitWidth && + this.content.width <= this.viewport.width && + this.content.height <= this.viewport.height && this.transform.scale <= this.option("baseScale") ) { this.$container.classList.remove(draggableClass);