diff --git a/ui/v2.5/src/hooks/Lightbox/Lightbox.tsx b/ui/v2.5/src/hooks/Lightbox/Lightbox.tsx
index 41c6d4fad..7d0f8d073 100644
--- a/ui/v2.5/src/hooks/Lightbox/Lightbox.tsx
+++ b/ui/v2.5/src/hooks/Lightbox/Lightbox.tsx
@@ -1,4 +1,11 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, {
+  ForwardedRef,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import {
   Button,
   Col,
@@ -69,7 +76,9 @@ const CLASSNAME_FOOTER_RIGHT = `${CLASSNAME_FOOTER}-right`;
 const CLASSNAME_DISPLAY = `${CLASSNAME}-display`;
 const CLASSNAME_CAROUSEL = `${CLASSNAME}-carousel`;
 const CLASSNAME_INSTANT = `${CLASSNAME_CAROUSEL}-instant`;
+const CLASSNAME_SWIPE = `${CLASSNAME_CAROUSEL}-swipe`;
 const CLASSNAME_IMAGE = `${CLASSNAME_CAROUSEL}-image`;
+const CLASSNAME_IMAGE_CONTAINER = `${CLASSNAME_CAROUSEL}-image-container`;
 const CLASSNAME_NAVBUTTON = `${CLASSNAME}-navbutton`;
 const CLASSNAME_NAV = `${CLASSNAME}-nav`;
 const CLASSNAME_NAVIMAGE = `${CLASSNAME_NAV}-image`;
@@ -82,6 +91,113 @@ const MIN_ZOOM = 0.1;
 const SCROLL_ZOOM_TIMEOUT = 250;
 const ZOOM_NONE_EPSILON = 0.015;
 
+interface ILightboxCarouselProps {
+  transition: string | null;
+  currentIndex: number;
+  images: ILightboxImage[];
+  displayMode: GQL.ImageLightboxDisplayMode;
+  scaleUp: boolean;
+  scrollMode: GQL.ImageLightboxScrollMode;
+  resetPosition?: boolean;
+  zoom: number;
+  scrollAttemptsBeforeChange: number;
+  firstScroll: React.MutableRefObject<number | null>;
+  inScrollGroup: React.MutableRefObject<boolean>;
+  movingLeft: boolean;
+  updateZoom: (v: number) => void;
+  debouncedScrollReset: () => void;
+  handleLeft: () => void;
+  handleRight: () => void;
+  overrideTransition: (t: string) => void;
+}
+
+const LightboxCarousel = forwardRef(function (
+  {
+    transition,
+    currentIndex,
+    images,
+    displayMode,
+    scaleUp,
+    scrollMode,
+    resetPosition,
+    zoom,
+    scrollAttemptsBeforeChange,
+    firstScroll,
+    inScrollGroup,
+    movingLeft,
+    updateZoom,
+    debouncedScrollReset,
+    handleLeft,
+    handleRight,
+    overrideTransition,
+  }: ILightboxCarouselProps,
+  carouselRef: ForwardedRef<HTMLDivElement>
+) {
+  const [carouselShift, setCarouselShift] = useState(0);
+
+  function handleMoveCarousel(delta: number) {
+    overrideTransition(CLASSNAME_INSTANT);
+    setCarouselShift(carouselShift + delta);
+  }
+
+  function handleReleaseCarousel(
+    event: React.PointerEvent,
+    swipeDuration: number,
+    cancelled: boolean
+  ): boolean {
+    const cappedDuration = Math.max(50, Math.min(500, swipeDuration)) / 1000;
+    const adjustedShift = carouselShift / (2 * cappedDuration);
+    let changed = false;
+    if (!cancelled && adjustedShift < -window.innerWidth / 2) {
+      handleRight();
+      changed = true;
+    } else if (!cancelled && adjustedShift > window.innerWidth / 2) {
+      handleLeft();
+      changed = true;
+    }
+    setCarouselShift(0);
+    overrideTransition(CLASSNAME_SWIPE);
+    return changed;
+  }
+
+  return (
+    <div
+      className={CLASSNAME_CAROUSEL + (transition ? ` ${transition}` : "")}
+      style={{ left: `calc(${currentIndex * -100}vw + ${carouselShift}px)` }}
+      ref={carouselRef}
+    >
+      {images.map((image, i) => (
+        <div className={`${CLASSNAME_IMAGE_CONTAINER}`} key={image.paths.image}>
+          {i >= currentIndex - 1 && i <= currentIndex + 1 ? (
+            <LightboxImage
+              src={image.paths.image ?? ""}
+              width={image.visual_files?.[0]?.width ?? 0}
+              height={image.visual_files?.[0]?.height ?? 0}
+              displayMode={displayMode}
+              scaleUp={scaleUp}
+              scrollMode={scrollMode}
+              resetPosition={resetPosition}
+              zoom={i === currentIndex ? zoom : 1}
+              scrollAttemptsBeforeChange={scrollAttemptsBeforeChange}
+              firstScroll={firstScroll}
+              inScrollGroup={inScrollGroup}
+              current={i === currentIndex}
+              alignBottom={movingLeft}
+              setZoom={updateZoom}
+              debouncedScrollReset={debouncedScrollReset}
+              onLeft={handleLeft}
+              onRight={handleRight}
+              isVideo={isVideo(image.visual_files?.[0] ?? {})}
+              moveCarousel={handleMoveCarousel}
+              releaseCarousel={handleReleaseCarousel}
+            />
+          ) : undefined}
+        </div>
+      ))}
+    </div>
+  );
+});
+
 interface IProps {
   images: ILightboxImage[];
   isVisible: boolean;
@@ -117,7 +233,6 @@ export const LightboxComponent: React.FC<IProps> = ({
   const [index, setIndex] = useState<number | null>(null);
   const [movingLeft, setMovingLeft] = useState(false);
   const oldIndex = useRef<number | null>(null);
-  const [instantTransition, setInstantTransition] = useState(false);
   const [isSwitchingPage, setIsSwitchingPage] = useState(true);
   const [isFullscreen, setFullscreen] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
@@ -144,7 +259,6 @@ export const LightboxComponent: React.FC<IProps> = ({
 
   const containerRef = useRef<HTMLDivElement | null>(null);
   const overlayTarget = useRef<HTMLButtonElement | null>(null);
-  const carouselRef = useRef<HTMLDivElement | null>(null);
   const indicatorRef = useRef<HTMLDivElement | null>(null);
   const navRef = useRef<HTMLDivElement | null>(null);
   const clearIntervalCallback = useRef<() => void>();
@@ -201,6 +315,11 @@ export const LightboxComponent: React.FC<IProps> = ({
   );
 
   const disableAnimation = config?.interface.imageLightbox.disableAnimation;
+  const defaultTransition = disableAnimation ? CLASSNAME_INSTANT : null;
+
+  const [transition, setTransition] = useState<string | null>(
+    defaultTransition
+  );
 
   function setSlideshowDelay(v: number) {
     setLightboxSettings({ slideshowDelay: v });
@@ -249,15 +368,18 @@ export const LightboxComponent: React.FC<IProps> = ({
     }
   }, [isSwitchingPage, images, index]);
 
-  const disableInstantTransition = useDebounce(
-    () => setInstantTransition(false),
+  const restoreTransition = useDebounce(
+    () => setTransition(defaultTransition),
     400
   );
 
-  const setInstant = useCallback(() => {
-    setInstantTransition(true);
-    disableInstantTransition();
-  }, [disableInstantTransition]);
+  const overrideTransition = useCallback(
+    (t: string) => {
+      setTransition(t);
+      restoreTransition();
+    },
+    [restoreTransition]
+  );
 
   useEffect(() => {
     if (images.length < 2) return;
@@ -359,10 +481,6 @@ export const LightboxComponent: React.FC<IProps> = ({
     (isUserAction = true) => {
       if (isSwitchingPage || index === -1) return;
 
-      if (disableAnimation) {
-        setInstant();
-      }
-
       setShowChapters(false);
       setMovingLeft(true);
 
@@ -380,25 +498,13 @@ export const LightboxComponent: React.FC<IProps> = ({
         resetIntervalCallback.current();
       }
     },
-    [
-      images,
-      pageCallback,
-      isSwitchingPage,
-      resetIntervalCallback,
-      index,
-      disableAnimation,
-      setInstant,
-    ]
+    [images, pageCallback, isSwitchingPage, resetIntervalCallback, index]
   );
 
   const handleRight = useCallback(
     (isUserAction = true) => {
       if (isSwitchingPage) return;
 
-      if (disableAnimation) {
-        setInstant();
-      }
-
       setMovingLeft(false);
       setShowChapters(false);
 
@@ -423,8 +529,6 @@ export const LightboxComponent: React.FC<IProps> = ({
       isSwitchingPage,
       resetIntervalCallback,
       index,
-      disableAnimation,
-      setInstant,
     ]
   );
 
@@ -439,12 +543,12 @@ export const LightboxComponent: React.FC<IProps> = ({
   const handleKey = useCallback(
     (e: KeyboardEvent) => {
       if (e.repeat && (e.key === "ArrowRight" || e.key === "ArrowLeft"))
-        setInstant();
+        overrideTransition(CLASSNAME_INSTANT);
       if (e.key === "ArrowLeft") handleLeft();
       else if (e.key === "ArrowRight") handleRight();
       else if (e.key === "Escape") close();
     },
-    [setInstant, handleLeft, handleRight, close]
+    [overrideTransition, handleLeft, handleRight, close]
   );
   const handleFullScreenChange = () => {
     if (clearIntervalCallback.current) {
@@ -883,42 +987,25 @@ export const LightboxComponent: React.FC<IProps> = ({
               <Icon icon={faChevronLeft} />
             </Button>
           )}
-
-          <div
-            className={cx(CLASSNAME_CAROUSEL, {
-              [CLASSNAME_INSTANT]: instantTransition,
-            })}
-            style={{ left: `${currentIndex * -100}vw` }}
-            ref={carouselRef}
-          >
-            {images.map((image, i) => (
-              <div className={`${CLASSNAME_IMAGE}`} key={image.paths.image}>
-                {i >= currentIndex - 1 && i <= currentIndex + 1 ? (
-                  <LightboxImage
-                    src={image.paths.image ?? ""}
-                    width={image.visual_files?.[0]?.width ?? 0}
-                    height={image.visual_files?.[0]?.height ?? 0}
-                    displayMode={displayMode}
-                    scaleUp={scaleUp}
-                    scrollMode={scrollMode}
-                    resetPosition={resetPosition}
-                    zoom={i === currentIndex ? zoom : 1}
-                    scrollAttemptsBeforeChange={scrollAttemptsBeforeChange}
-                    firstScroll={firstScroll}
-                    inScrollGroup={inScrollGroup}
-                    current={i === currentIndex}
-                    alignBottom={movingLeft}
-                    setZoom={updateZoom}
-                    debouncedScrollReset={debouncedScrollReset}
-                    onLeft={handleLeft}
-                    onRight={handleRight}
-                    isVideo={isVideo(image.visual_files?.[0] ?? {})}
-                  />
-                ) : undefined}
-              </div>
-            ))}
-          </div>
-
+          <LightboxCarousel
+            transition={transition}
+            currentIndex={currentIndex}
+            images={images}
+            displayMode={displayMode}
+            scaleUp={scaleUp}
+            scrollMode={scrollMode}
+            resetPosition={resetPosition}
+            zoom={zoom}
+            scrollAttemptsBeforeChange={scrollAttemptsBeforeChange}
+            firstScroll={firstScroll}
+            inScrollGroup={inScrollGroup}
+            movingLeft={movingLeft}
+            updateZoom={updateZoom}
+            debouncedScrollReset={debouncedScrollReset}
+            handleLeft={handleLeft}
+            handleRight={handleRight}
+            overrideTransition={overrideTransition}
+          />
           {allowNavigation && (
             <Button
               variant="link"
diff --git a/ui/v2.5/src/hooks/Lightbox/LightboxImage.tsx b/ui/v2.5/src/hooks/Lightbox/LightboxImage.tsx
index 0f2b9df8a..2cd2a34a7 100644
--- a/ui/v2.5/src/hooks/Lightbox/LightboxImage.tsx
+++ b/ui/v2.5/src/hooks/Lightbox/LightboxImage.tsx
@@ -1,5 +1,13 @@
-import React, { useEffect, useRef, useState, useCallback } from "react";
+import React, {
+  MutableRefObject,
+  useEffect,
+  useRef,
+  useState,
+  useCallback,
+} from "react";
+import useResizeObserver from "@react-hook/resize-observer";
 import * as GQL from "src/core/generated-graphql";
+import cx from "classnames";
 
 const ZOOM_STEP = 1.1;
 const ZOOM_FACTOR = 700;
@@ -11,6 +19,7 @@ const SCROLL_PAN_FACTOR = 2;
 const CLASSNAME = "Lightbox";
 const CLASSNAME_CAROUSEL = `${CLASSNAME}-carousel`;
 const CLASSNAME_IMAGE = `${CLASSNAME_CAROUSEL}-image`;
+const CLASSNAME_IMAGE_PAN = `${CLASSNAME_IMAGE}-pan`;
 
 function calculateDefaultZoom(
   width: number,
@@ -50,6 +59,28 @@ function calculateDefaultZoom(
   return newZoom;
 }
 
+interface IDimension {
+  width: number;
+  height: number;
+}
+
+export const useContainerDimensions = <
+  T extends HTMLElement = HTMLDivElement
+>(): [MutableRefObject<T | null>, IDimension] => {
+  const target = useRef<T | null>(null);
+  const [dimension, setDimension] = useState<IDimension>({
+    width: 0,
+    height: 0,
+  });
+
+  useResizeObserver(target, (entry) => {
+    const { inlineSize: width, blockSize: height } = entry.contentBoxSize[0];
+    setDimension({ width, height });
+  });
+
+  return [target, dimension];
+};
+
 interface IProps {
   src: string;
   width: number;
@@ -71,6 +102,12 @@ interface IProps {
   debouncedScrollReset: () => void;
   onLeft: () => void;
   onRight: () => void;
+  moveCarousel: (v: number) => void;
+  releaseCarousel: (
+    ev: React.PointerEvent,
+    swipeDuration: number,
+    cancelled: boolean
+  ) => boolean;
   isVideo: boolean;
 }
 
@@ -92,38 +129,35 @@ export const LightboxImage: React.FC<IProps> = ({
   debouncedScrollReset,
   onLeft,
   onRight,
+  moveCarousel,
+  releaseCarousel,
   isVideo,
 }) => {
-  const [defaultZoom, setDefaultZoom] = useState(1);
-  const [moving, setMoving] = useState(false);
+  const [defaultZoom, setDefaultZoom] = useState<number | null>(null);
   const [positionX, setPositionX] = useState(0);
   const [positionY, setPositionY] = useState(0);
   const [imageWidth, setImageWidth] = useState(width);
   const [imageHeight, setImageHeight] = useState(height);
-  const [boxWidth, setBoxWidth] = useState(0);
-  const [boxHeight, setBoxHeight] = useState(0);
   const dimensionsProvided = width > 0 && height > 0;
+  const [containerRef, { width: boxWidth, height: boxHeight }] =
+    useContainerDimensions();
 
-  const mouseDownEvent = useRef<MouseEvent>();
   const resetPositionRef = useRef(resetPosition);
 
-  const container = React.createRef<HTMLDivElement>();
-  const startPoints = useRef<number[]>([0, 0]);
+  // Panning and swipe navigation are tracked in startPoint. Pinch zoom is
+  // tracked in prevDiff. They are undefined if no action of that type is in
+  // progress.
+  const startPoint = useRef<number[] | undefined>();
+  const startTime = useRef<number>(0);
   const pointerCache = useRef<React.PointerEvent[]>([]);
   const prevDiff = useRef<number | undefined>();
 
   const scrollAttempts = useRef(0);
 
   useEffect(() => {
-    const box = container.current;
-    if (box) {
-      setBoxWidth(box.offsetWidth);
-      setBoxHeight(box.offsetHeight);
-    }
-
     function toggleVideoPlay() {
-      if (container.current) {
-        let openVideo = container.current.getElementsByTagName("video");
+      if (containerRef.current) {
+        let openVideo = containerRef.current.getElementsByTagName("video");
         if (openVideo.length > 0) {
           let rect = openVideo[0].getBoundingClientRect();
           if (Math.abs(rect.x) < document.body.clientWidth / 2) {
@@ -138,7 +172,7 @@ export const LightboxImage: React.FC<IProps> = ({
     setTimeout(() => {
       toggleVideoPlay();
     }, 250);
-  }, [container]);
+  }, [containerRef]);
 
   useEffect(() => {
     if (dimensionsProvided) {
@@ -161,27 +195,30 @@ export const LightboxImage: React.FC<IProps> = ({
     };
   }, [src, dimensionsProvided]);
 
+  const calcPanBounds = useCallback(
+    (appliedZoom: number) => {
+      const xRange = Math.max(appliedZoom * imageWidth - boxWidth, 0);
+      const yRange = Math.max(appliedZoom * imageHeight - boxHeight, 0);
+      const nonZero = xRange != 0 || yRange != 0;
+      return {
+        minX: -xRange / 2,
+        maxX: xRange / 2,
+        minY: -yRange / 2,
+        maxY: yRange / 2,
+        nonZero,
+      };
+    },
+    [imageWidth, boxWidth, imageHeight, boxHeight]
+  );
+  const panBounds =
+    defaultZoom !== null
+      ? calcPanBounds(defaultZoom * zoom)
+      : { minX: 0, maxX: 0, minY: 0, maxY: 0, nonZero: false };
+
   const minMaxY = useCallback(
     (appliedZoom: number) => {
-      let minY, maxY: number;
-      const inBounds = appliedZoom * imageHeight <= boxHeight;
-
-      // NOTE: I don't even know how these work, but they do
-      if (!inBounds) {
-        if (imageHeight > boxHeight) {
-          minY =
-            (appliedZoom * imageHeight - imageHeight) / 2 -
-            appliedZoom * imageHeight +
-            boxHeight;
-          maxY = (appliedZoom * imageHeight - imageHeight) / 2;
-        } else {
-          minY = (boxHeight - appliedZoom * imageHeight) / 2;
-          maxY = (appliedZoom * imageHeight - boxHeight) / 2;
-        }
-      } else {
-        minY = Math.min((boxHeight - imageHeight) / 2, 0);
-        maxY = minY;
-      }
+      const minY = Math.min((boxHeight - appliedZoom * imageHeight) / 2, 0);
+      const maxY = Math.max((appliedZoom * imageHeight - boxHeight) / 2, 0);
 
       return [minY, maxY];
     },
@@ -190,33 +227,21 @@ export const LightboxImage: React.FC<IProps> = ({
 
   const calculateInitialPosition = useCallback(
     (appliedZoom: number) => {
-      // Center image from container's center
-      const newPositionX = Math.min((boxWidth - imageWidth) / 2, 0);
-      let newPositionY: number;
-
-      if (displayMode === GQL.ImageLightboxDisplayMode.FitXy) {
-        newPositionY = Math.min((boxHeight - imageHeight) / 2, 0);
-      } else {
-        // otherwise, align image with container
-        const [minY, maxY] = minMaxY(appliedZoom);
-        if (!alignBottom) {
-          newPositionY = maxY;
-        } else {
-          newPositionY = minY;
-        }
-      }
+      // If image is smaller than container, place in center. Otherwise, align
+      // the left side of the image with the left side of the container, and
+      // align either the top or bottom of the image with the corresponding
+      // edge of container, depending on whether navigation is forwards or
+      // backwards.
+      const [minY, maxY] = minMaxY(appliedZoom);
+      const newPositionX = Math.max(
+        (appliedZoom * imageWidth - boxWidth) / 2,
+        0
+      );
+      const newPositionY = alignBottom ? minY : maxY;
 
       return [newPositionX, newPositionY];
     },
-    [
-      displayMode,
-      boxWidth,
-      imageWidth,
-      boxHeight,
-      imageHeight,
-      alignBottom,
-      minMaxY,
-    ]
+    [boxWidth, imageWidth, alignBottom, minMaxY]
   );
 
   useEffect(() => {
@@ -267,6 +292,9 @@ export const LightboxImage: React.FC<IProps> = ({
   ]);
 
   useEffect(() => {
+    if (defaultZoom === null) {
+      return;
+    }
     if (resetPosition !== resetPositionRef.current) {
       resetPositionRef.current = resetPosition;
 
@@ -352,7 +380,7 @@ export const LightboxImage: React.FC<IProps> = ({
   }
 
   function onImageScrollPanY(ev: React.WheelEvent, infinite: boolean) {
-    if (!current) return;
+    if (!current || defaultZoom === null) return;
 
     const [minY, maxY] = minMaxY(zoom * defaultZoom);
 
@@ -386,6 +414,8 @@ export const LightboxImage: React.FC<IProps> = ({
   }
 
   function onImageScroll(ev: React.WheelEvent) {
+    if (defaultZoom === null) return;
+
     const absDeltaY = Math.abs(ev.deltaY);
     const firstDeltaY = firstScroll.current;
     // detect infinite scrolling (mousepad, mouse with infinite scrollwheel)
@@ -405,6 +435,9 @@ export const LightboxImage: React.FC<IProps> = ({
           percent = ev.deltaY < 0 ? ZOOM_STEP : 1 / ZOOM_STEP;
         }
         setZoom(zoom * percent);
+        const bounds = calcPanBounds(defaultZoom * zoom * percent);
+        setPositionX(Math.max(bounds.minX, Math.min(bounds.maxX, positionX)));
+        setPositionY(Math.max(bounds.minY, Math.min(bounds.maxY, positionY)));
         break;
       case GQL.ImageLightboxScrollMode.PanY:
         onImageScrollPanY(ev, infinite);
@@ -422,76 +455,6 @@ export const LightboxImage: React.FC<IProps> = ({
     debouncedScrollReset();
   }
 
-  function onImageMouseOver(ev: React.MouseEvent) {
-    if (!moving) return;
-
-    if (!ev.buttons) {
-      setMoving(false);
-      return;
-    }
-
-    const posX = ev.pageX - startPoints.current[0];
-    const posY = ev.pageY - startPoints.current[1];
-    startPoints.current = [ev.pageX, ev.pageY];
-
-    setPositionX(positionX + posX);
-    setPositionY(positionY + posY);
-  }
-
-  function onImageMouseDown(ev: React.MouseEvent) {
-    startPoints.current = [ev.pageX, ev.pageY];
-    setMoving(true);
-
-    mouseDownEvent.current = ev.nativeEvent;
-  }
-
-  function onImageMouseUp(ev: React.MouseEvent) {
-    if (ev.button !== 0) return;
-
-    if (
-      !mouseDownEvent.current ||
-      ev.timeStamp - mouseDownEvent.current.timeStamp > 200
-    ) {
-      // not a click - ignore
-      return;
-    }
-
-    // must be a click
-    if (
-      ev.pageX !== startPoints.current[0] ||
-      ev.pageY !== startPoints.current[1]
-    ) {
-      return;
-    }
-
-    if (ev.nativeEvent.offsetX >= (ev.target as HTMLElement).offsetWidth / 2) {
-      onRight();
-    } else {
-      onLeft();
-    }
-  }
-
-  function onTouchStart(ev: React.TouchEvent) {
-    ev.preventDefault();
-    if (ev.touches.length === 1) {
-      startPoints.current = [ev.touches[0].pageX, ev.touches[0].pageY];
-      setMoving(true);
-    }
-  }
-
-  function onTouchMove(ev: React.TouchEvent) {
-    if (!moving) return;
-
-    if (ev.touches.length === 1) {
-      const posX = ev.touches[0].pageX - startPoints.current[0];
-      const posY = ev.touches[0].pageY - startPoints.current[1];
-      startPoints.current = [ev.touches[0].pageX, ev.touches[0].pageY];
-
-      setPositionX(positionX + posX);
-      setPositionY(positionY + posY);
-    }
-  }
-
   function onPointerDown(ev: React.PointerEvent) {
     // replace pointer event with the same id, if applicable
     pointerCache.current = pointerCache.current.filter(
@@ -500,15 +463,77 @@ export const LightboxImage: React.FC<IProps> = ({
 
     pointerCache.current.push(ev);
     prevDiff.current = undefined;
+
+    startTime.current = ev.timeStamp;
+    if (pointerCache.current.length === 1) {
+      startPoint.current = [ev.clientX, ev.clientY];
+    } else if (
+      pointerCache.current.length === 2 &&
+      startPoint.current !== undefined
+    ) {
+      const centerX = Math.abs(ev.clientX + startPoint.current[0]) / 2;
+      const centerY = Math.abs(ev.clientY + startPoint.current[1]) / 2;
+      startPoint.current = [centerX, centerY];
+    }
   }
 
   function onPointerUp(ev: React.PointerEvent) {
+    let found = false;
+
     for (let i = 0; i < pointerCache.current.length; i++) {
       if (pointerCache.current[i].pointerId === ev.pointerId) {
         pointerCache.current.splice(i, 1);
+        found = true;
         break;
       }
     }
+
+    if (!found || pointerCache.current.length !== 0) {
+      if (pointerCache.current.length === 1) {
+        // If we are transitioning from pinch zoom to pan, reset this
+        // so we don't pan relative to the old center point.
+        startPoint.current = [
+          pointerCache.current[0].clientX,
+          pointerCache.current[0].clientY,
+        ];
+      }
+      return;
+    }
+
+    if (ev.pointerType === "touch" && startPoint.current !== null) {
+      // Swipe navigation, returns true if actually moved to another image.
+      if (releaseCarousel(ev, ev.timeStamp - startTime.current, false)) {
+        return;
+      }
+    }
+
+    if (
+      ev.button === 0 &&
+      ev.timeStamp - startTime.current <= 200 &&
+      startPoint.current !== undefined &&
+      ev.clientX === startPoint.current[0] &&
+      ev.clientY === startPoint.current[1]
+    ) {
+      // Click or tap navigation
+
+      if (ev.clientX >= window.innerWidth / 2) {
+        onRight();
+      } else {
+        onLeft();
+      }
+    }
+  }
+
+  function onPointerCancel(ev: React.PointerEvent) {
+    for (let i = 0; i < pointerCache.current.length; i++) {
+      if (pointerCache.current[i].pointerId === ev.pointerId) {
+        pointerCache.current.splice(i, 1);
+        if (ev.pointerType === "touch" && pointerCache.current.length === 0) {
+          releaseCarousel(ev, ev.timeStamp - startTime.current, true);
+        }
+        return;
+      }
+    }
   }
 
   function onPointerMove(ev: React.PointerEvent) {
@@ -516,30 +541,89 @@ export const LightboxImage: React.FC<IProps> = ({
     const cachedIndex = pointerCache.current.findIndex(
       (c) => c.pointerId === ev.pointerId
     );
-    if (cachedIndex !== -1) {
-      pointerCache.current[cachedIndex] = ev;
-    }
 
-    // compare the difference between the two pointers
-    if (pointerCache.current.length === 2) {
+    if (cachedIndex === -1 || defaultZoom === null) return;
+
+    pointerCache.current[cachedIndex] = ev;
+
+    if (pointerCache.current.length === 2 && startPoint.current !== undefined) {
+      // Pinch zoom
+
+      // compare the difference between the two pointers
       const ev1 = pointerCache.current[0];
       const ev2 = pointerCache.current[1];
       const diffX = Math.abs(ev1.clientX - ev2.clientX);
       const diffY = Math.abs(ev1.clientY - ev2.clientY);
       const diff = Math.sqrt(diffX ** 2 + diffY ** 2);
+      const centerX = Math.abs(ev1.clientX + ev2.clientX) / 2;
+      const centerY = Math.abs(ev1.clientY + ev2.clientY) / 2;
+      const deltaX = centerX - startPoint.current[0];
+      const deltaY = centerY - startPoint.current[1];
+      startPoint.current = [centerX, centerY];
 
       if (prevDiff.current !== undefined) {
         const diffDiff = diff - prevDiff.current;
         const factor = (Math.abs(diffDiff) / 20) * 0.1 + 1;
 
-        if (diffDiff > 0) {
-          setZoom(zoom * factor);
-        } else if (diffDiff < 0) {
-          setZoom((zoom * 1) / factor);
-        }
+        let newZoom = diffDiff > 0 ? zoom * factor : zoom / factor;
+        setZoom(newZoom);
+        const bounds = calcPanBounds(defaultZoom * newZoom);
+
+        const newPositionX = Math.max(
+          bounds.minX,
+          Math.min(
+            bounds.maxX,
+            (diffDiff > 0 ? positionX * factor : positionX / factor) + deltaX
+          )
+        );
+        const newPositionY = Math.max(
+          bounds.minY,
+          Math.min(
+            bounds.maxY,
+            (diffDiff > 0 ? positionY * factor : positionY / factor) + deltaY
+          )
+        );
+
+        setPositionX(newPositionX);
+        setPositionY(newPositionY);
       }
 
       prevDiff.current = diff;
+    } else if (
+      pointerCache.current.length === 1 &&
+      startPoint.current !== undefined &&
+      pointerCache.current[0].pointerType === "touch" &&
+      panBounds.minX === panBounds.maxX
+    ) {
+      // Swipe navigation (touch only, and only when panning is not possible)
+      const deltaX = ev.clientX - startPoint.current[0];
+      startPoint.current = [ev.clientX, ev.clientY];
+      moveCarousel(deltaX);
+    } else if (
+      pointerCache.current.length === 1 &&
+      startPoint.current !== undefined
+    ) {
+      // Panning
+
+      if (!ev.buttons) {
+        return;
+      }
+
+      const deltaX = ev.clientX - startPoint.current[0];
+      const deltaY = ev.clientY - startPoint.current[1];
+      startPoint.current = [ev.clientX, ev.clientY];
+
+      const newPositionX = Math.max(
+        panBounds.minX,
+        Math.min(panBounds.maxX, positionX + deltaX)
+      );
+      const newPositionY = Math.max(
+        panBounds.minY,
+        Math.min(panBounds.maxY, positionY + deltaY)
+      );
+
+      setPositionX(newPositionX);
+      setPositionY(newPositionY);
     }
   }
 
@@ -547,35 +631,35 @@ export const LightboxImage: React.FC<IProps> = ({
 
   return (
     <div
-      ref={container}
-      className={`${CLASSNAME_IMAGE}`}
+      ref={containerRef}
+      className={cx(CLASSNAME_IMAGE, {
+        [CLASSNAME_IMAGE_PAN]: panBounds.nonZero,
+      })}
+      style={{ touchAction: "none" }}
       onWheel={(e) => onContainerScroll(e)}
+      onPointerDown={onPointerDown}
+      onPointerMove={onPointerMove}
+      onPointerUp={onPointerUp}
+      onPointerCancel={onPointerCancel}
     >
       {defaultZoom ? (
-        <picture
-          style={{
-            transform: `translate(${positionX}px, ${positionY}px) scale(${
-              defaultZoom * zoom
-            })`,
-          }}
-        >
-          <source srcSet={src} media="(min-width: 800px)" />
+        <picture>
           {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
           <ImageView
+            style={{
+              touchAction: "none",
+              position: "relative",
+              left: "50%",
+              top: "50%",
+              transform: `translate(-50%, -50%) translate(${positionX}px, ${positionY}px) scale(${
+                defaultZoom * zoom
+              })`,
+            }}
             loop={isVideo}
             src={src}
             alt=""
             draggable={false}
-            style={{ touchAction: "none" }}
             onWheel={current ? (e) => onImageScroll(e) : undefined}
-            onMouseDown={onImageMouseDown}
-            onMouseUp={onImageMouseUp}
-            onMouseMove={onImageMouseOver}
-            onTouchStart={onTouchStart}
-            onTouchMove={onTouchMove}
-            onPointerDown={onPointerDown}
-            onPointerUp={onPointerUp}
-            onPointerMove={onPointerMove}
           />
         </picture>
       ) : undefined}
diff --git a/ui/v2.5/src/hooks/Lightbox/lightbox.scss b/ui/v2.5/src/hooks/Lightbox/lightbox.scss
index 95a5fbc42..b42838127 100644
--- a/ui/v2.5/src/hooks/Lightbox/lightbox.scss
+++ b/ui/v2.5/src/hooks/Lightbox/lightbox.scss
@@ -144,28 +144,29 @@
       transition-duration: 0ms;
     }
 
-    &-image {
+    &-swipe {
+      transition-duration: 200ms;
+      transition-timing-function: ease-out;
+    }
+
+    &-image-container {
       content-visibility: auto;
-      display: flex;
       width: 100vw;
+    }
 
-      picture {
-        display: flex;
-        margin: auto;
-        position: relative;
-
-        > div {
-          display: flex;
-          height: 100%;
-          position: absolute;
-          width: 100%;
-        }
-      }
+    &-image {
+      height: 100%;
+      width: 100%;
 
       img {
-        cursor: pointer;
         object-fit: contain;
       }
+
+      &-pan {
+        img {
+          cursor: pointer;
+        }
+      }
     }
   }