add photoswipe lightbox, works

Author: nemanjam

package.json

@@ -49,6 +49,7 @@
     "github-slugger": "^2.0.0",
     "mdast-util-to-string": "^4.0.0",
     "object-treeify": "^5.0.1",
+    "photoswipe": "^5.4.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-grid-gallery": "^1.0.1",

src/components/react/NewGallery.tsx

@@ -1,13 +1,21 @@
 import { useEffect, useRef, useState } from 'react';
 
+import PhotoSwipeLightbox from 'photoswipe/lightbox';
+
 import type { ImageProps } from '@/libs/gallery/transform';
 import type { FC } from 'react';
 
+import 'photoswipe/style.css';
+
+import { GALLERY_ID } from '@/constants/gallery';
+
 interface Props {
   images: ImageProps[];
 }
 
-const PAGE_SIZE = 3 as const; // Todo: make it responsive
+// step
+const PAGE_SIZE = 6 as const; // Todo: make it responsive
+// page dependency in useEffect is more important
 const INITIAL_PAGE = 1 as const;
 
 const fetchImagesUpToPage = (images: ImageProps[], nextPage: number): ImageProps[] => {
@@ -46,15 +54,42 @@ const NewGallery: FC<Props> = ({ images }) => {
     // page dependency is important for initial load to work for all resolutions
   }, [observerTarget, page]);
 
+  // lightbox
+  useEffect(() => {
+    let lightbox: PhotoSwipeLightbox | null = new PhotoSwipeLightbox({
+      gallery: '#' + GALLERY_ID,
+      children: 'a',
+      pswpModule: () => import('photoswipe'),
+    });
+    lightbox.init();
+
+    return () => {
+      lightbox?.destroy();
+      lightbox = null;
+    };
+  }, []);
+
   return (
     <>
-      <div className="grid grid-cols-1 gap-1 md:grid-cols-2 lg:grid-cols-3">
+      <div
+        id={GALLERY_ID}
+        className="pswp-gallery grid grid-cols-1 gap-1 sm:grid-cols-2 lg:grid-cols-3"
+      >
         {loadedImages.map((image) => (
-          <img key={image.xs.src} src={image.xs.src} alt="thumbnail image" className="" />
+          <a
+            key={`${GALLERY_ID}--${image.xl.src}`}
+            href={image.xl.src}
+            data-pswp-width={image.xl.width}
+            data-pswp-height={image.xl.height}
+            target="_blank"
+            rel="noreferrer"
+          >
+            <img src={image.xs.src} alt="Gallery image" className="w-full" />
+          </a>
         ))}
       </div>
       {/* control threshold with margin-top */}
-      <div ref={observerTarget} className="h-8 border border-red-500 mt-0"></div>
+      <div ref={observerTarget} className="mt-0"></div>
     </>
   );
 };

src/constants/gallery.ts

@@ -1 +1,3 @@
-export const EXCLUDE_IMAGES = ['avatar1.jpg', 'square-night1.jpg'];
+export const EXCLUDE_IMAGES = ['avatar1.jpg', 'square-night1.jpg'] as const;
+
+export const GALLERY_ID = 'my-gallery' as const;

yarn.lock

@@ -5340,6 +5340,11 @@ pend@~1.2.0:
   resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
   integrity sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==
 
+photoswipe@^5.4.4:
+  version "5.4.4"
+  resolved "https://registry.yarnpkg.com/photoswipe/-/photoswipe-5.4.4.tgz#e045dc036453493188d5c8665b0e8f1000ac4d6e"
+  integrity sha512-WNFHoKrkZNnvFFhbHL93WDkW3ifwVOXSW3w1UuZZelSmgXpIGiZSNlZJq37rR8YejqME2rHs9EhH9ZvlvFH2NA==
+
 picocolors@^1.0.0, picocolors@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"