在盖茨比的产品页面缩略图上实现图像放大的最佳方法

Question

1. 列表项

使用gatsby-remark-images-medium-zoom@1.2.1或gatsby-remark-images-zoom时，点击我的产品缩略图不会放大

在gatsby-config中都遵循自述文件和声明的插件，还尝试了对选项配置的试验。看看我的意思是一个例子：https://store.shaka-surf.com/products/eco-medium-g5-surf-fins

   import React from 'react'
   import Img from 'gatsby-image'
   import { graphql, useStaticQuery } from 'gatsby'

   export default function Thumbnails({ src }) { 
   const { allMoltinProduct } = useStaticQuery(graphql`
     query allMoltinProductsQuery {
     allMoltinProduct {
       nodes {
         id
         images {
           childImageSharp {
            sizes(sizes: "max-width: 801px) 100vw, 801px") {
              srcSet
              sizes
       }
      } 
    }
   }
 }
 }
`)

 return (
   <div className="thumbnail-container">
     {allMoltinProduct.nodes.map(product => (
      <React.Fragment key={product.id}>
        {product.images.map((image, index) => (
          <ul className="thumbnail-list">
          <li key={`image-${index}`} style={{display: 'inline-block', float: 
 'none', color: '#F2F4F5', width: '44px', height: '44px'}}>
          <Img fluid={image.childImageSharp.fluid.src} 
          />
          <img sizes={image.childImageSharp.sizes.sizes} src= 
 {image.childImageSharp.fluid.src}  srcSet= 
 {image.childImageSharp.sizes.srcSet} className="thumbnail-image medium-zoom- image" loading="lazy" alt={product.name} />
          >
          </li>
          </ul>
        ))}
      </React.Fragment>
      ))} 
  </div>
 )
 }

希望产品缩略图放大。

Answer 1

更新：设法从repo的灯箱中获取了Lightbox，这对我来说已经足够了。稍后会返回缩略图。