我遇到了一个问题,让SimpleLightbox不加载我,直到我刷新我的盖茨比网站上的页面。我有一个演示,如果你从“灵感”页面(https://effulgent-liger-a1d01e.netlify.app/inspiration)然后点击一个单独的灵感,你会看到通过点击画廊中的照片,它只是打开照片的网址,而不是灯箱。然后如果你刷新页面并点击图库中的一张图片,它就会很好地加载灯箱。我想这是我盖茨比学习过程的一部分,但在这一点上被难住了。谢谢任何帮助。
这里是我个人的“灵感”后文件代码。
import React from 'react'
import styled from 'styled-components'
import { GatsbyImage } from 'gatsby-plugin-image'
import SimpleLightbox from 'simple-lightbox'
import 'simple-lightbox/dist/simpleLightbox.min.css'
import Seo from "../components/seo"
import CTAOne from '../components/ctaOne'
const HeroSection = styled.section`
height: 650px;
position: relative;
@media(min-width: 768px) {
height: 825px;
}
.hero-image .gatsby-image-wrapper {
width: 100%;
height: 650px;
object-fit: cover;
object-position: center;
@media(min-width: 768px) {
height: 825px;
}
}
.hero-content {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
z-index: 1;
text-align: center;
width: calc(100% - 20px);
max-width: 1160px;
padding: 15px 0;
background-color: var(--white-trans);
.hero-border-top,
.hero-border-bottom {
height: 18px;
width: 100%;
border: 6px solid var(--white-trans);
}
.hero-border-top {
margin-top: -33px;
}
.hero-border-bottom {
margin-bottom: -33px;
}
h1 {
margin-bottom: 0;
}
p {
font-size: 21px;
line-height: 1.2;
width: 100%;
max-width: 900px;
margin: 25px auto 21px auto;
padding-left: 10px;
padding-right: 10px;
@media(min-width: 768px) {
font-size: 23px;
}
}
}
`
const InspirationPostContainer = styled.section`
margin-bottom: 90px;
.inspiration-desc {
max-width: 850px;
margin: 90px auto 85px auto;
text-align: center;
}
.inspiration-grid {
column-count: 1;
column-gap: 55px;
@media(min-width: 640px) {
column-count: 2;
}
@media(min-width: 992px) {
column-count: 3;
}
}
.item {
margin: 0 0 40px;
display: grid;
grid-template-rows: 1fr auto;
break-inside: avoid;
}
.item > img {
grid-row: 1 / -1;
grid-column: 1;
}
`
function InspirationPost({ pageContext }) {
const { inspiration } = pageContext
if (typeof window !== `undefined`) {
new SimpleLightbox({elements: '.inspiration-grid a'})
}
return (
<>
<HeroSection>
<div className='hero-image'>
<GatsbyImage image={inspiration.inspiration.projectFeaturedPhoto.gatsbyImage} alt={inspiration.inspiration.projectFeaturedPhoto.altText} />
</div>
<div className="hero-content">
<div className='hero-border-top'></div>
<h1>{inspiration.inspiration.projectTitle}</h1>
<div className='hero-border-bottom'></div>
</div>
</HeroSection>
<InspirationPostContainer>
<div className="container">
<div className='inspiration-desc'>{inspiration.inspiration.projectDescription}</div>
<h2>Project Gallery</h2>
<div className='inspiration-grid'>
{inspiration.inspiration.projectGallery.map((node) => (
<a href={`${node.mediaItemUrl}`} className='item' key={node.id}>
<GatsbyImage image={node.gatsbyImage} alt={node.altText} />
</a>
))}
</div>
</div>
</InspirationPostContainer>
<CTAOne />
</>
)
}
export default InspirationPost
2条答案
按热度按时间tyky79it1#
这个问题似乎与SimpleLightbox模块有关,你试过这样的东西吗?
看起来库在第一次初始渲染时没有加载,或者元素在lightbox请求它们的同时没有准备好,但是当水合发生时,一切都正常工作,所以在正确的时间加载或强制重新加载应该会起作用。
lvjbypge2#
这可能是与库初始化的方式相关的错误,或者是lightbox请求元素时元素未准备好。
你可以尝试使用useEffect钩子来延迟SimpleLightbox的初始化,直到页面完全加载。你可以像这样在代码中添加钩子:
这段代码将只在页面完全加载后执行SimpleLightbox初始化,以确保必要的元素可用。
希望这能有所帮助!