时间戳

首页 > 解决方案 > 在 Gatsby 产品页面上的缩略图上实现图像放大的最佳方法

reactjs - 在 Gatsby 产品页面上的缩略图上实现图像放大的最佳方法

问题描述

  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>
 )
 }

希望放大产品缩略图。

标签： reactjsgatsby

解决方案

更新：设法从这个repo中获得 Lightbox，在我的画廊中工作，这对于现在来说已经足够了。稍后将返回缩略图。

推荐阅读