Image 1
Image 1

Image sample text

Image 2
Image 2

Image sample text

Image 3
Image 3

Image sample text

Image 4
Image 4

Image sample text

Image 5
Image 5

Image sample text

Image 6
Image 6

Image sample text

Image 7
Image 7

Image sample text

Image 8
Image 8

Image sample text

Image 9
Image 9

Image sample text

Image 10
Image 10

Image sample text

Image 11
Image 11

Image sample text

Image 12
Image 12

Image sample text

Lightbox

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

Your company © 2023

Version 1.3.0