mirror of
https://github.com/UofCBaja/BajaUofCWebsite.git
synced 2025-07-11 05:37:12 -06:00
Worked on Gallery Page
This commit is contained in:
42
src/Gallery/Gallery.css
Normal file
42
src/Gallery/Gallery.css
Normal file
@ -0,0 +1,42 @@
|
||||
.gallery {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
||||
grid-gap: 10px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.gallery {
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
grid-gap: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.galleryItem {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.galleryItem:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.modalImage {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.modalButton {
|
||||
position: absolute;
|
||||
padding: 16px;
|
||||
background-color: green;
|
||||
border-radius: 16px;
|
||||
bottom: 10px;
|
||||
left: 200px;
|
||||
width: 100px;
|
||||
}
|
@ -1,5 +1,60 @@
|
||||
import Modal from 'react-modal';
|
||||
import { useState } from "react";
|
||||
import './Gallery.css';
|
||||
|
||||
const images = [
|
||||
{ src: 'https://i.pinimg.com/736x/70/28/0f/70280f1b75ea956f4fdef7e31336d9f0.jpg', alt: 'Image 1' },
|
||||
{ src: 'https://wallpapers.com/images/featured-full/cool-anime-6kbwj9794wpnsfr1.jpg', alt: 'Image 2' },
|
||||
{ src: 'https://wallpapers.com/images/featured/cool-anime-pfp-pictures-71urutpksg13vkbk.jpg', alt: 'Image 3' },
|
||||
{ src: 'https://i.pinimg.com/236x/ab/dc/52/abdc52db893674a7b5dcb767be8776e5.jpg', alt: 'Image 4' },
|
||||
{ src: 'https://qph.cf2.quoracdn.net/main-qimg-a3fdbac7bf9f8db58f147887ffa76d88-lq', alt: 'Image 5' }
|
||||
];
|
||||
|
||||
export default function Gallery() {
|
||||
const [open, setOpen] = useState(false)
|
||||
const [display, setDisplay] = useState('')
|
||||
|
||||
const handleClick = (arg) => {
|
||||
console.log("Test")
|
||||
setDisplay(arg)
|
||||
setOpen(true)
|
||||
console.log(open)
|
||||
}
|
||||
|
||||
return (
|
||||
<p>Gallery</p>
|
||||
<div>
|
||||
<div className="gallery">
|
||||
{images.map((image, index) => (
|
||||
<img
|
||||
key={index}
|
||||
className="galleryItem"
|
||||
src={image.src}
|
||||
alt={image.alt}
|
||||
onClick={() => handleClick(image.src)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div>
|
||||
<Modal
|
||||
isOpen={open}
|
||||
onRequestClose={() => setOpen(false)}
|
||||
style={{
|
||||
overlay: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
},
|
||||
content: {
|
||||
position: 'initial'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="container">
|
||||
<button className="modalButton" onClick={() => setOpen(false)}>x</button>
|
||||
<img className="modalImage" src={display} onClick={() => setOpen(false)} />
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
Reference in New Issue
Block a user