50 lines
2.0 KiB
JavaScript
50 lines
2.0 KiB
JavaScript
'use client';
|
|
import { useState } from "react";
|
|
import 'react-image-lightbox/style.css';
|
|
import Lightbox from 'react-image-lightbox';
|
|
|
|
export default function GalleryLightbox({ images }) {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const [photoIndex, setPhotoIndex] = useState(0);
|
|
|
|
return (
|
|
<>
|
|
<div className="masonry-items-container row no-gutters clearfix">
|
|
{images.map((img, idx) => (
|
|
<div key={idx} className={`col-lg-3 col-md-6 col-sm-12`}>
|
|
<div className="gallery-block-two masonry-item">
|
|
<div className="inner-box">
|
|
<div
|
|
className="image-box"
|
|
style={{ cursor: "pointer" }}
|
|
onClick={() => { setPhotoIndex(idx); setIsOpen(true); }}
|
|
>
|
|
<img src={img} alt={`Gallery Image ${idx + 1}`} />
|
|
<div className="overlay-box">
|
|
<h6>Image {idx + 1}</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{isOpen && (
|
|
<Lightbox
|
|
mainSrc={images[photoIndex]}
|
|
nextSrc={images[(photoIndex + 1) % images.length]}
|
|
prevSrc={images[(photoIndex + images.length - 1) % images.length]}
|
|
onCloseRequest={() => setIsOpen(false)}
|
|
onMovePrevRequest={() =>
|
|
setPhotoIndex((photoIndex + images.length - 1) % images.length)
|
|
}
|
|
onMoveNextRequest={() =>
|
|
setPhotoIndex((photoIndex + 1) % images.length)
|
|
}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
}
|