update 2/2/2026

src/components/product/detail/images/PhotoSwipeImage.tsx

@@ -0,0 +1,53 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+import PhotoSwipeLightbox from 'photoswipe/lightbox'
+import 'photoswipe/style.css'
+
+export default function PhotoSwipeImage({
+    images,
+    activeIndex
+}: {
+    images: string[]
+    activeIndex: number
+}) {
+    const galleryRef = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+        if (!galleryRef.current) return
+
+        const lightbox = new PhotoSwipeLightbox({
+            gallery: '#pswp-gallery',
+            children: 'a',
+            pswpModule: () => import('photoswipe')
+        })
+
+        lightbox.init()
+
+        return () => lightbox.destroy()
+    }, [])
+
+    return (
+        <div
+            id="pswp-gallery"
+            ref={galleryRef}
+            className="w-full"
+        >
+            {images.map((img, index) => (
+                <a
+                    key={index}
+                    href={img}
+                    data-pswp-width="1200"
+                    data-pswp-height="1200"
+                    className={index === activeIndex ? 'block' : 'hidden'}
+                >
+                    <img
+                        src={img}
+                        alt=""
+                        className="w-full object-contain cursor-zoom-in"
+                    />
+                </a>
+            ))}
+        </div>
+    )
+}

src/components/product/detail/images/index.tsx

@@ -0,0 +1,57 @@
+'use client'
+
+import { useState } from 'react'
+import dynamic from 'next/dynamic'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import { Navigation } from 'swiper/modules'
+import Link from 'next/link'
+
+const PhotoSwipeImage = dynamic(
+    () => import('./PhotoSwipeImage'),
+    { ssr: false }
+)
+
+export default function ProductImage({ data }: any) {
+    const images: string[] = Array.from(
+        new Set([
+            data.productImage.large.replace('250_', ''),
+            ...(data.imageCollection?.map((i: any) =>
+                i.image.large.replace('250_', '')
+            ) || [])
+        ])
+    )
+
+    const [activeIndex, setActiveIndex] = useState(0)
+
+    return (
+        <>
+            <div className="pd-image-top mb-4">
+                <PhotoSwipeImage
+                    images={images}
+                    activeIndex={activeIndex}
+                />
+            </div>
+
+            <div className="pd-gallery-list">
+                <Swiper
+                    modules={[Navigation]}
+                    spaceBetween={12}
+                    slidesPerView={5}
+                >
+                    {images.map((img, index) => (
+                        <SwiperSlide key={img}>
+                            <img
+                                src={img}
+                                onClick={() => setActiveIndex(index)}
+                                className={`cursor-pointer border rounded-md
+                                    ${activeIndex === index
+                                        ? 'border-[#0678DB]'
+                                        : 'border-transparent'}`}
+                            />
+                        </SwiperSlide>
+                    ))}
+                </Swiper>
+            </div>
+        </>
+    )
+}