From 2b1eb93881734b6560adc5ae037e89fdab8f98f1 Mon Sep 17 00:00:00 2001 From: Derek Brooks Date: Sun, 11 Feb 2024 16:03:51 -0600 Subject: [PATCH 1/2] Add ability to constrain max zoom to 100% of original image size --- src/modules/zoom/zoom.mjs | 20 +++++++++++++++----- src/types/modules/zoom.d.ts | 6 ++++++ 2 files changed, 21 insertions(+), 5 deletions(-) diff --git a/src/modules/zoom/zoom.mjs b/src/modules/zoom/zoom.mjs index 1fff14737..7e160c46a 100644 --- a/src/modules/zoom/zoom.mjs +++ b/src/modules/zoom/zoom.mjs @@ -11,6 +11,7 @@ export default function Zoom({ swiper, extendParams, on, emit }) { extendParams({ zoom: { enabled: false, + limitToOriginalSize: false, maxRatio: 3, minRatio: 1, toggle: true, @@ -87,6 +88,16 @@ export default function Zoom({ swiper, extendParams, on, emit }) { return distance; } + function getMaxRatio() { + const params = swiper.params.zoom; + const maxRatio = gesture.imageWrapEl.getAttribute('data-swiper-zoom') || params.maxRatio; + if (params.limitToOriginalSize && gesture.imageEl.naturalWidth) { + const imageMaxRatio = gesture.imageEl.naturalWidth / gesture.imageEl.offsetWidth; + return Math.min(imageMaxRatio, maxRatio); + } + return maxRatio; + } + function getScaleOrigin() { if (evCache.length < 2) return { x: null, y: null }; const box = gesture.imageEl.getBoundingClientRect(); @@ -158,7 +169,7 @@ export default function Zoom({ swiper, extendParams, on, emit }) { return; } - gesture.maxRatio = gesture.imageWrapEl.getAttribute('data-swiper-zoom') || params.maxRatio; + gesture.maxRatio = getMaxRatio(); } if (gesture.imageEl) { const [originX, originY] = getScaleOrigin(); @@ -476,10 +487,9 @@ export default function Zoom({ swiper, extendParams, on, emit }) { touchY = undefined; } - zoom.scale = - forceZoomRatio || gesture.imageWrapEl.getAttribute('data-swiper-zoom') || params.maxRatio; - currentScale = - forceZoomRatio || gesture.imageWrapEl.getAttribute('data-swiper-zoom') || params.maxRatio; + const maxRatio = getMaxRatio(); + zoom.scale = forceZoomRatio || maxRatio; + currentScale = forceZoomRatio || maxRatio; if (e && !(currentScale === 1 && forceZoomRatio)) { slideWidth = gesture.slideEl.offsetWidth; diff --git a/src/types/modules/zoom.d.ts b/src/types/modules/zoom.d.ts index 0b302c061..658f5baef 100644 --- a/src/types/modules/zoom.d.ts +++ b/src/types/modules/zoom.d.ts @@ -45,6 +45,12 @@ export interface ZoomEvents { } export interface ZoomOptions { + /** + * When set to true, the image will not be scaled past 100% of its original size + * + * @default false + */ + limitToOriginalSize?: boolean; /** * Maximum image zoom multiplier * From 3e655df8c65843401652c442e334472bfc0544bd Mon Sep 17 00:00:00 2001 From: Vladimir Kharlampidi Date: Tue, 27 Feb 2024 13:30:20 +0300 Subject: [PATCH 2/2] check for `gesture.imageEl` --- src/modules/zoom/zoom.mjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/modules/zoom/zoom.mjs b/src/modules/zoom/zoom.mjs index 7e160c46a..d6b28c793 100644 --- a/src/modules/zoom/zoom.mjs +++ b/src/modules/zoom/zoom.mjs @@ -91,7 +91,7 @@ export default function Zoom({ swiper, extendParams, on, emit }) { function getMaxRatio() { const params = swiper.params.zoom; const maxRatio = gesture.imageWrapEl.getAttribute('data-swiper-zoom') || params.maxRatio; - if (params.limitToOriginalSize && gesture.imageEl.naturalWidth) { + if (params.limitToOriginalSize && gesture.imageEl && gesture.imageEl.naturalWidth) { const imageMaxRatio = gesture.imageEl.naturalWidth / gesture.imageEl.offsetWidth; return Math.min(imageMaxRatio, maxRatio); }