Image sample text
Image sample text
Image sample text
Image sample text
Image sample text
Image sample text
Image sample text
Image sample text
Image sample text
Image sample text
Image sample text
Image sample text
React Image Lightbox is a lightweight react lightbox plugin.
You can configure lightbox to your needs in src/components/Lightbox.js
. Follow instructions in plugins documentation.
import Lightbox from "../components/Lightbox"
import { Col, Row } from "react-bootstrap"
import Image from "../components/CustomImage"
export default function page(props) {
const data = [
{
"img": "/img1.jpg",
"caption": {
"title": "Image 1",
"text": "Image sample text"
}
},
{
"img": "/img2.jpg",
"caption": {
"title": "Image 2",
"text": "Image sample text"
}
},
{
"img": "/img3.jpg",
"caption": {
"title": "Image 3",
"text": "Image sample text"
}
},
]
// Lightbox state
const [lightBoxOpen, setLightBoxOpen] = useState(false)
// Active image state
const [activeImage, setActiveImage] = useState(0)
// On image click
const onClick = (index) => {
setActiveImage(index) // Set current active image
setLightBoxOpen(!lightBoxOpen) // Open lightbox
}
return(
<Row>
{data.map((item, index) => (
<Col xs={6} key={index}>
<Image
src={item.img}
alt={item.caption.title}
layout="responsive"
width={600}
height={400}
onClick={() => onClick(index)}
/>
</Col>
))}
<Lightbox
open={lightBoxOpen}
close={() => setLightBoxOpen(false)}
slides={data?.map((image) => ({
alt: image.caption.title,
src: image.img,
}))}
index={activeImage}
/>
</Row>
)
}