image gallery
Unanswered
Roadside Hawk posted this in #help-forum
Roadside HawkOP
Hi guys I am trying to implement this idea. I have a image gallery in a grid layout so if a user clicks on an image on the grid it should open up a modal like page or a modal which shows the image and a thumbnail. How can I make sure that the image on the grid is the one shown on the modal along with the description. I am not using typescript.
3 Replies
Giant panda
Very simple solution - create a state of
And on the
selectedImage and pass it to the modal component.And on the
onClick set the clicked image as the selectedImageRoadside HawkOP
export default function page() {
const [showModal, setShowModal] = useState(false);
const [selectedImage, setSelectedImage] = useState();
console.log("Image id with src: " + imageData.imageSrc);
return (
<main className={styles.mainWrapper}>
<Modal
open={showModal}
closeModal={() => setShowModal(false)}
/>
<section className={styles.imageGrid}>
{imageList}
</section>
</main>
);
}
const [showModal, setShowModal] = useState(false);
const [selectedImage, setSelectedImage] = useState();
console.log("Image id with src: " + imageData.imageSrc);
return (
<main className={styles.mainWrapper}>
<Modal
open={showModal}
closeModal={() => setShowModal(false)}
/>
<section className={styles.imageGrid}>
{imageList}
</section>
</main>
);
}
@Giant panda the above is the code i have written. The images have been map {imageList} where will i add the selectedImage state also can you kindly explain how that'll apply to all images. I am relatively new to nextjs and also i haven't tried implementing such before.