I have a functioning image slider in the site I am building (
Here's the code I have from the page:
import React, { useContext, useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { DatabaseContext } from '../contexts/database-context';
import Gallery from 'react-grid-gallery';
import '../scss/pages/HomeDetailPage.scss'
function HomeDetailPage() {
const { GetSelectedListingDetail, GetListingOwner, selectedListing, listingOwner } = useContext(DatabaseContext);
const {
address,
bathrooms,
bedrooms,
creationDate,
description,
images,
postKey,
latitude,
longitude,
postRef,
postUrl,
poster,
price,
rawPrice,
squareFeet,
view_Count,
isHighlighted
} = selectedListing || '';
const { email } = listingOwner || '';
const params = useParams();
const [isLoading, setIsLoading] = useState(true);
const getImages = (images) => {
return Object.values(images)
}
useEffect(() => {
const { id } = params;
GetSelectedListingDetail(id)
}, [params]);
useEffect(() => {
if (selectedListing !== null) {
setIsLoading(false);
}
}, [selectedListing]);
useEffect(() => {
if (poster) {
GetListingOwner(poster)
}
}, [poster])
if (isLoading && selectedListing === null) {
return <progress className="progress is-small is-info" max="100">60%</progress>
}
const IMAGES =
[{
src: "https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_b.jpg",
thumbnail: "https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_n.jpg",
thumbnailWidth: 320,
thumbnailHeight: 174,
isSelected: true,
caption: "After Rain (Jeshu John - designerspics.com)"
},
{
src: "https://c2.staticflickr.com/9/8356/28897120681_3b2c0f43e0_b.jpg",
thumbnail: "https://c2.staticflickr.com/9/8356/28897120681_3b2c0f43e0_n.jpg",
thumbnailWidth: 320,
thumbnailHeight: 212,
tags: [{value: "Ocean", title: "Ocean"}, {value: "People", title: "People"}],
caption: "Boats (Jeshu John - designerspics.com)"
},
{
src: `${Object.values(images).toString()}` //doesn't load image
}]
return (
<div className='detailBg'>
<div className='home-detail-page'>
<div className="home-detail-page-col-1">
{/*images go here */}
<Gallery images={Object.values([images])}/>
</div>
<div className="home-detail-page-col-2">
<div className="detailDiv">
<div className="propInfo">
<p className="title is-2 mb-5">{price}</p>
<p className="subtitle is-6 mb-2">{address}</p>
<p className="subtitle is-6">{bathrooms ' ' bedrooms ' ' squareFeet}</p>
</div>
<div className="contactBtn">
<a className="button is-info" href={`mailto:${email}`}>Contact Owner</a>
</div>
<div className="propDesc">
<p className="title is-5">Property Overview:</p>
<p className="title is-6 pb-4">
{description}
</p>
</div>
</div>
</div>
</div>
</div>
)
}
export default HomeDetailPage;
CodePudding user response:
You need at least src
and thumbnail
on each image. Here is the correct code:
<Gallery
images={Object.values(images).map((url) => ({
src: url,
thumbnail: url
}))}
/>
The library has not been updated for years. It only seems to work for React 16. I definitely don't recommend using it as is. Only if you fork and update everything.