feat(image zoom): add image zoom

Refs: IS-11

package.json

@@ -25,10 +25,9 @@
   },
   "homepage": "https://github.com/ythepaut/image-showcase#readme",
   "dependencies": {
+    "bigger-picture": "^1.1.17",
     "next": "^14.2.5",
     "next-intl": "^3.17.3",
-    "photoswipe": "^5.4.4",
-    "photoswipe-deep-zoom-plugin": "^1.1.2",
     "react": "18.3.1",
     "react-dom": "18.3.1"
   },
@@ -40,7 +39,6 @@
     "@tsconfig/next": "^2.0.3",
     "@types/jest": "^29.5.12",
     "@types/node": "^22.3.0",
-    "@types/photoswipe": "^4.1.6",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/testing-library__jest-dom": "^5.14.9",

src/components/ImageDetailModal.tsx

@@ -1,10 +1,6 @@
 import { Image } from "../model/image";
-import ReactDOMServer from "react-dom/server";
-import Shimmer from "./Shimmer";
-import { default as NextImage } from "next/image";
 import { useEffect } from "react";
-import PhotoSwipe from "photoswipe";
-import PhotoSwipeLightbox from "photoswipe/lightbox";
+import BiggerPicture from "bigger-picture";
 
 interface Props {
   image: Image;
@@ -13,17 +9,6 @@ interface Props {
 
 export default function ImageDetailModal({ image, onClose }: Readonly<Props>) {
 
-  // Initialise picture zoom
-  useEffect(() => {
-    const lightbox = new PhotoSwipeLightbox({
-      gallery: `#${image.alt}`,
-      children: "a",
-      pswpModule: PhotoSwipe
-    });
-    lightbox.init();
-    return () => lightbox.destroy();
-  }, [image.alt]);
-
   // FIXME: Workaround for body scroll issue
   useEffect(() => {
     document.body.style.overflow = "hidden";
@@ -32,47 +17,49 @@ export default function ImageDetailModal({ image, onClose }: Readonly<Props>) {
     };
   }, []);
 
+  useEffect(() => {
+    const bp = BiggerPicture({
+      target: document.getElementById("image-wrapper")!
+    });
+    bp.open({
+      items: [{
+        img: image.src,
+        thumb: image.src,
+        width: image.width,
+        height: image.height,
+        alt: image.alt
+      }],
+      scale: 1,
+      noClose: true,
+      inline: true,
+      intro: "fadeup",
+      maxZoom: Math.max(image.width / window.innerWidth, image.height / window.innerHeight)
+    });
+
+    return () => bp.close();
+  }, [image]);
 
   return (
-    <div
-      className="z-10 fixed left-0 top-0 w-full h-full bg-bg-light-transparant bg-opacity-60 firefox:bg-opacity-60 backdrop-filter backdrop-blur-lg">
+    <div className="z-10 fixed left-0 top-0 w-full h-full bg-bg-light-transparant bg-opacity-60 firefox:bg-opacity-60 backdrop-filter backdrop-blur-lg">
       <div className="flex flex-col md:flex-row justify-between">
-
-        <div className="md:w-3/5 content-center ml-auto mr-auto">
-          <div id={image.alt}>
-            <a href={image.src} target="_blank">
-              <NextImage
-                data-pswp-width={image.width}
-                data-pswp-height={image.height}
-                className="w-full h-auto max-h-90vh md:rounded-100 object-contain cursor-zoom-in"
-                src={image.src}
-                alt={image.alt}
-                width={image.width}
-                height={image.height}
-                quality={100}
-                unoptimized={true}
-                placeholder={`data:image/svg+xml,${encodeURIComponent(
-                  ReactDOMServer.renderToString(
-                    <Shimmer width={image.width} height={image.height} />
-                  )
-                )}`}
-              />
-            </a>
-          </div>
+        <div className="w-full h-full content-center ml-auto mr-auto">
+          <div
+            id="image-wrapper"
+            className="relative h-screen max-h-70vh md:max-h-screen sm:mt-auto sm:mb-auto overflow-hidden before:content-[''] before:block"
+          />
         </div>
 
-        <div className="bg-bg-light md:w-1/3 md:h-screen h-screen p-200">
+        <div className="bg-bg-light md:w-1/3 lg:w-1/4 h-screen p-200">
           <button
             className="mt-50 mr-50 text-4xl text-text-light"
             onClick={onClose}
           >
-            &times;
+              &times;
           </button>
           <br />
           <br />
           {image.alt}
         </div>
-
       </div>
     </div>
   );

src/pages/_app.tsx

@@ -1,6 +1,6 @@
 import "../styles/global.css";
 import "../styles/variables.css";
-import "photoswipe/style.css";
+import "bigger-picture/css";
 import { NextIntlClientProvider } from "next-intl";
 import type { Metadata } from "next";
 import React from "react";

src/styles/global.css

@@ -11,3 +11,4 @@
     scroll-behavior: smooth;
   }
 }
+