Работа с react-photo-gallery
я воспользовался библиотекой react-photo-gallery для создания Галлереи, я обернул объект массива в <div> после чего у меня перестал работать Lightbox он дает стили для IMG как я могу исправить код чтобы Lightbox видел тег img внутри дива.
function LetterBlock() {
const [currentImage, setCurrentImage] = useState(0);
const [viewerIsOpen, setViewerIsOpen] = useState(false);
const openLightbox = useCallback((event, { photo, index }) => {
setCurrentImage(index);
setViewerIsOpen(true);
}, []);
const closeLightbox = () => {
setCurrentImage(0);
setViewerIsOpen(false);
};
return (
<div className='sdsdsd'>
<Gallery
photos={photos}
renderImage={images => (
<div className={'kek'}>
<img src={images.key} />
</div>
)}
onClick={openLightbox}
/>
<ModalGateway>
{viewerIsOpen ? (
<Modal onClose={closeLightbox}>
<Carousel
currentIndex={currentImage}
views={photos.map(x => ({
...x,
srcset: x.srcSet,
caption: x.title,
}))}
/>
</Modal>
) : null}
</ModalGateway>
</div>
);
};
Так выглядит код для Галлереи. Ниже массив в с кторого берется фото.
export const photos = [
{
src: "https://source.unsplash.com/2ShvY8Lf6l0/800x599",
width: 4,
height: 3
},
{
src: "https://source.unsplash.com/Dm-qxdynoEc/800x799",
width: 1,
height: 1
},
{
src: "https://source.unsplash.com/qDkso9nvCg0/600x799",
width: 3,
height: 4
},
{
src: "https://source.unsplash.com/iecJiKe_RNg/600x799",
width: 3,
height: 4
},
{
src: "https://source.unsplash.com/epcsn8Ed8kY/600x799",
width: 3,
height: 4
},
{
src: "https://source.unsplash.com/NQSWvyVRIJk/800x599",
width: 4,
height: 3
},
{
src: "https://source.unsplash.com/zh7GEuORbUw/600x799",
width: 3,
height: 4
},
{
src: "https://source.unsplash.com/PpOHJezOalU/800x599",
width: 4,
height: 3
},
{
src: "https://source.unsplash.com/I1ASdgphUH4/800x599",
width: 4,
height: 3
}
];