mirror of
https://github.com/UofCBaja/BajaUofCWebsite.git
synced 2025-06-15 13:24:17 -06:00
added image slider
This commit is contained in:
parent
e4d34021d2
commit
92d6fd7ca9
@ -1,16 +1,5 @@
|
||||
import React from 'react';
|
||||
import ImageSlider from '../Images/ImageSlider'; // Adjust the import path based on your directory structure
|
||||
|
||||
import React from "react";
|
||||
|
||||
export default function AboutsUs() {
|
||||
// return (
|
||||
// <p>About Us</p>
|
||||
// );
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>Image Slider</h1>
|
||||
<ImageSlider category="Car" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
return <p>About Us</p>;
|
||||
}
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import yaml from "js-yaml";
|
||||
import eventData from "../../MockDB/pastCompetitions.yml";
|
||||
import SlideShow from "../../ImageSlider/SlideShow";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
/**
|
||||
* @param {null} null - requires nothing
|
||||
@ -47,7 +49,7 @@ const PreviousEvents = () => {
|
||||
const competition = previousCompetitionsDict[competitionKey];
|
||||
console.log(competition.SAEYoutubeLink);
|
||||
return (
|
||||
<table>
|
||||
<table key={competitionKey}>
|
||||
<tbody>
|
||||
<thead>
|
||||
<tr>
|
||||
@ -94,9 +96,14 @@ const PreviousEvents = () => {
|
||||
</div>
|
||||
<div>
|
||||
<h2>This Year's Events</h2>
|
||||
<button>Upcoming Events</button>
|
||||
<Link to={"/UpcomingEvents"}>
|
||||
<button>Upcoming Events</button>
|
||||
</Link>
|
||||
{/* will change to thing below when merged onto dev branch */}
|
||||
{/* <OpenPage pageToGoTo={"/UpcomingEvents"} textOnButton={"Upcoming Events"} /> */}
|
||||
<SlideShow
|
||||
imgList={previousCompetitionsDict["Oshkosh"]["OurPhotosLinks"]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -3,6 +3,7 @@ import yaml from "js-yaml";
|
||||
import "./UpcomingEvents.css";
|
||||
import eventData from "../../MockDB/currentCompetition.yml";
|
||||
import CountDownTimer from "../../CountDown/CountDownTimer";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
/**
|
||||
* @param {null} null - requires nothing
|
||||
@ -98,7 +99,9 @@ const UpcominEvents = () => {
|
||||
<div></div>
|
||||
<h1>Previous Events</h1>
|
||||
</div>
|
||||
<button>Previous Events</button>
|
||||
<Link to={"/PreviousEvents"}>
|
||||
<button>Previous Events</button>
|
||||
</Link>
|
||||
{/* will change to thing below when merged onto dev branch */}
|
||||
{/* <OpenPage pageToGoTo={"/PreviuosEvents"} textOnButton={"Previous Events"} /> */}
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,4 @@
|
||||
import Modal from 'react-modal';
|
||||
import { useState } from "react";
|
||||
import './Gallery.css';
|
||||
import { ImageFinder } from '../Images/ImageFinder.js';
|
||||
import "./Gallery.css";
|
||||
|
||||
/**
|
||||
* @param {null} null - requires onthing
|
||||
@ -10,56 +7,55 @@ import { ImageFinder } from '../Images/ImageFinder.js';
|
||||
* @author Sarim <sheikhsarim20@gmail.com>
|
||||
* @todo Seperate the Modal section into its own seperate function, and add comments
|
||||
*/
|
||||
export default function Gallery() {
|
||||
const [open, setOpen] = useState(false)
|
||||
const [display, setDisplay] = useState('')
|
||||
const [altDisplay, setAltDisplay] =useState('')
|
||||
const allImages = ImageFinder('all')
|
||||
const Gallery = () => {
|
||||
return (
|
||||
<div>
|
||||
Gallery
|
||||
{/* <div className="gallery">
|
||||
{allImages.map((image, index) => (
|
||||
<img
|
||||
key={index}
|
||||
className="galleryItem"
|
||||
src={image.src}
|
||||
alt={image.alt}
|
||||
onClick={() => handleClick(image.src, image.alt)}
|
||||
/>
|
||||
))}
|
||||
</div> */}
|
||||
{/* <div>
|
||||
<Modal
|
||||
isOpen={open}
|
||||
onRequestClose={() => setOpen(false)}
|
||||
style={{
|
||||
overlay: {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
content: {
|
||||
position: "initial",
|
||||
border: "none",
|
||||
borderRadius: "0px",
|
||||
padding: "0px",
|
||||
},
|
||||
}}>
|
||||
<div className="container">
|
||||
<button
|
||||
className="modalButton"
|
||||
onClick={() => setOpen(false)}>
|
||||
x
|
||||
</button>
|
||||
<img
|
||||
className="modalImage"
|
||||
src={display}
|
||||
alt={altDisplay}
|
||||
onClick={() => setOpen(false)}
|
||||
/>
|
||||
</div>
|
||||
</Modal>
|
||||
</div> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const handleClick = (image, alt) => {
|
||||
setDisplay(image)
|
||||
setAltDisplay(alt)
|
||||
setOpen(true)
|
||||
console.log(open)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="gallery">
|
||||
{allImages.map((image, index) => (
|
||||
<img
|
||||
key={index}
|
||||
className="galleryItem"
|
||||
src={image.src}
|
||||
alt={image.alt}
|
||||
onClick={() => handleClick(image.src, image.alt)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div>
|
||||
<Modal
|
||||
isOpen={open}
|
||||
onRequestClose={() => setOpen(false)}
|
||||
style={{
|
||||
overlay: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
content: {
|
||||
position: 'initial',
|
||||
border: 'none',
|
||||
borderRadius: '0px',
|
||||
padding: '0px'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="container">
|
||||
<button className="modalButton" onClick={() => setOpen(false)}>x</button>
|
||||
<img className="modalImage" src={display} alt={altDisplay} onClick={() => setOpen(false)} />
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default Gallery;
|
||||
|
||||
77
src/ImageSlider/SlideShow.css
Normal file
77
src/ImageSlider/SlideShow.css
Normal file
@ -0,0 +1,77 @@
|
||||
.slideShow figure {
|
||||
display: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fade {
|
||||
animation-name: fade;
|
||||
animation-duration: 1.5s;
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
from {
|
||||
opacity: 0.4;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.slideShow .next,
|
||||
.slideShow .prev {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
width: auto;
|
||||
margin-top: -22px;
|
||||
padding: 16px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
transition: 0.6s ease;
|
||||
border-radius: 0 3px 3px 0;
|
||||
user-select: none;
|
||||
}
|
||||
.slideShow .next {
|
||||
right: 0;
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.slideShow .next:hover,
|
||||
.slideShow .prev:hover {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.slideShow figure p {
|
||||
color: #f2f2f2;
|
||||
font-size: 12px;
|
||||
padding: 8px 12px;
|
||||
position: relative;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.slideShow figure figcaption {
|
||||
color: #f2f2f2;
|
||||
font-size: 15px;
|
||||
padding: 8px 12px;
|
||||
position: relative;
|
||||
bottom: 8px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.slideShow .dot {
|
||||
cursor: pointer;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
margin: 0 2px;
|
||||
background-color: #bbb;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
transition: background-color 0.6s ease;
|
||||
}
|
||||
|
||||
.slideShow .active,
|
||||
.slideShow .dot:hover {
|
||||
background-color: #717171;
|
||||
}
|
||||
106
src/ImageSlider/SlideShow.jsx
Normal file
106
src/ImageSlider/SlideShow.jsx
Normal file
@ -0,0 +1,106 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import "./SlideShow.css";
|
||||
|
||||
const SlideShow = (imgList) => {
|
||||
console.log(imgList);
|
||||
const [imgArray, setImgArray] = useState(imgList["imgList"]);
|
||||
let showIndex = 1;
|
||||
const ErrorMessage = `Please add an Object Like This \`imgList: \`{ imgList: [ { AltTag: 'linkurl' }, { AltTag: 'linkurl' }, { AltTag: 'linkurl' } ] }`;
|
||||
const slides = document.getElementsByTagName("figure");
|
||||
const dots = document.getElementsByClassName("dot");
|
||||
|
||||
useEffect(() => {
|
||||
if (imgArray !== undefined) {
|
||||
showSlide(1);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const showSlide = (indexToShow) => {
|
||||
if (indexToShow > slides.length) {
|
||||
indexToShow = 1;
|
||||
}
|
||||
if (indexToShow < 1) {
|
||||
indexToShow = slides.length;
|
||||
}
|
||||
|
||||
showIndex = indexToShow;
|
||||
|
||||
let indexToNotShow;
|
||||
for (indexToNotShow = 0; indexToNotShow < slides.length; indexToNotShow++) {
|
||||
slides[indexToNotShow].style.display = "none";
|
||||
}
|
||||
|
||||
for (indexToNotShow = 0; indexToNotShow < slides.length; indexToNotShow++) {
|
||||
dots[indexToNotShow].className = dots[indexToNotShow].className.replace(
|
||||
" active",
|
||||
""
|
||||
);
|
||||
}
|
||||
|
||||
slides[showIndex - 1].style.display = "block";
|
||||
dots[showIndex - 1].className += " active";
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="slideShow">
|
||||
{imgArray === undefined ? (
|
||||
<p dangerouslySetInnerHTML={{ __html: ErrorMessage }}></p>
|
||||
) : (
|
||||
<>
|
||||
<div>
|
||||
{Object.keys(imgArray).map((imgIndex) => {
|
||||
let imgSrc = imgArray[imgIndex];
|
||||
let imgLink = Object.values(imgSrc)[0];
|
||||
let imgCaption = Object.keys(imgSrc)[0];
|
||||
return (
|
||||
<figure
|
||||
key={imgIndex}
|
||||
className="fade">
|
||||
<p>
|
||||
{parseInt(imgIndex) + 1} / {imgArray.length}
|
||||
</p>
|
||||
<img
|
||||
src={imgLink}
|
||||
alt={imgCaption}
|
||||
/>
|
||||
<figcaption>{imgCaption}</figcaption>
|
||||
</figure>
|
||||
);
|
||||
})}
|
||||
|
||||
<p
|
||||
class="prev"
|
||||
onClick={() => {
|
||||
showSlide(showIndex - 1);
|
||||
}}>
|
||||
❮
|
||||
</p>
|
||||
<p
|
||||
class="next"
|
||||
onClick={() => {
|
||||
showSlide(showIndex + 1);
|
||||
}}>
|
||||
❯
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className="dots"
|
||||
style={{ textAlign: "center" }}>
|
||||
{Object.keys(imgArray).map((imgIndex) => {
|
||||
return (
|
||||
<span
|
||||
key={imgIndex}
|
||||
class="dot"
|
||||
onClick={() => {
|
||||
showSlide(imgIndex);
|
||||
}}></span>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SlideShow;
|
||||
@ -1,11 +0,0 @@
|
||||
import imagesData from './Images.json';
|
||||
|
||||
// Function to search and filter images based on the provided category
|
||||
export const ImageFinder = (category) => {
|
||||
if (category === 'all') {
|
||||
return imagesData;
|
||||
} else {
|
||||
const filteredImages = imagesData.filter(image => image.category === category);
|
||||
return filteredImages;
|
||||
}
|
||||
};
|
||||
@ -1,57 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { ImageFinder } from './ImageFinder.js';
|
||||
import RenderImage from './RenderImage.js';
|
||||
|
||||
const ImageSlider = ({ category }) => {
|
||||
// Time Interval before the ImageSlider moves to the next image
|
||||
const timeInterval = 5000;
|
||||
|
||||
// State to hold the images of the specified category and the current index
|
||||
const [categoryImages, setCategoryImages] = useState([]);
|
||||
const [currentIndex, setCurrentIndex] = useState(0);
|
||||
|
||||
// Effect to filter images based on the provided category when it changes
|
||||
useEffect(() => {
|
||||
const filteredImages = ImageFinder(category);
|
||||
setCategoryImages(filteredImages);
|
||||
setCurrentIndex(0);
|
||||
}, [category]);
|
||||
|
||||
// Effect to automatically move to the next image after a certain time interval
|
||||
useEffect(() => {
|
||||
const intervalId = setInterval(() => {handleNext();}, timeInterval);
|
||||
|
||||
// Cleanup: Clear the interval on component unmount or when currentIndex or categoryImages changes
|
||||
return () => clearInterval(intervalId);
|
||||
}, [currentIndex, categoryImages]);
|
||||
|
||||
// Function to handle moving to the next image
|
||||
const handleNext = () => {
|
||||
setCurrentIndex((prevIndex) => (prevIndex + 1) % categoryImages.length);
|
||||
};
|
||||
|
||||
// Function to handle moving to the previous image
|
||||
const handlePrev = () => {
|
||||
setCurrentIndex((prevIndex) => (prevIndex - 1 + categoryImages.length) % categoryImages.length);
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ position: 'relative', overflow: 'hidden' }}>
|
||||
{/* Container to display previous, current, and next images */}
|
||||
<div style={{ display: 'flex' }}>
|
||||
{/* Button to move to the previous image */}
|
||||
<button onClick={handlePrev}>Previous</button>
|
||||
{/* Render the previous image */}
|
||||
{RenderImage((currentIndex - 1 + categoryImages.length) % categoryImages.length, categoryImages)}
|
||||
{/* Render the current image */}
|
||||
{RenderImage(currentIndex, categoryImages)}
|
||||
{/* Render the next image */}
|
||||
{RenderImage((currentIndex + 1) % categoryImages.length, categoryImages)}
|
||||
{/* Button to move to the next image */}
|
||||
<button onClick={handleNext}>Next</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ImageSlider;
|
||||
@ -1,51 +0,0 @@
|
||||
[
|
||||
{
|
||||
"id": 1,
|
||||
"src": "https://img.freepik.com/free-photo/luxurious-car-parked-highway-with-illuminated-headlight-sunset_181624-60607.jpg?size=626&ext=jpg&ga=GA1.1.87170709.1707264000&semt=sph",
|
||||
"alt": "Image 1",
|
||||
"category": "Car"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"src": "https://media.architecturaldigest.com/photos/63079fc7b4858efb76814bd2/16:9/w_4000,h_2250,c_limit/9.%20DeLorean-Alpha-5%20%5BDeLorean%5D.jpg",
|
||||
"alt": "Image 2",
|
||||
"category": "Car"
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"src": "https://cdn.motor1.com/images/mgl/g440ng/s3/rimac-nevera.jpg",
|
||||
"alt": "Image 3",
|
||||
"category": "Car"
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"src": "https://www.shutterstock.com/image-vector/realistic-vector-red-car-gradients-260nw-2271536365.jpg",
|
||||
"alt": "Image 4",
|
||||
"category": "Car"
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"src": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTJNuga_vmLPm7BLwbqQmsuNklxIsqXm_tTMg&usqp=CAU",
|
||||
"alt": "Image 5",
|
||||
"category": "Members"
|
||||
},
|
||||
{
|
||||
"id": 6,
|
||||
"src": "data:image/png;base64,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",
|
||||
"alt": "Image 6",
|
||||
"category": "Members"
|
||||
},
|
||||
{
|
||||
"id": 7,
|
||||
"src": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRMdEL6UJgg3rFpj41o1bcjX4z2b_OEaYYNJg&usqp=CAU",
|
||||
"alt": "Image 7",
|
||||
"category": "Members"
|
||||
},
|
||||
{
|
||||
"id": 8,
|
||||
"src": "https://png.pngtree.com/png-vector/20220331/ourmid/pngtree-group-of-people-silhouette-png-image_4520545.png",
|
||||
"alt": "Image 8",
|
||||
"category": "Members"
|
||||
}
|
||||
]
|
||||
|
||||
@ -1,26 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
// Function to render an image based on the provided index
|
||||
const RenderImage = (index, categoryImages) => {
|
||||
// Check if categoryImages is not empty before accessing its properties
|
||||
if (categoryImages.length > 0 && categoryImages[index]) {
|
||||
return (
|
||||
<img
|
||||
key={index}
|
||||
src={categoryImages[index].src}
|
||||
alt={categoryImages[index].alt}
|
||||
// onClick={handleImageClick}
|
||||
style={{ maxWidth: '100%', maxHeight: '100%' }}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return null; // or handle this case as needed
|
||||
}
|
||||
}
|
||||
|
||||
export default RenderImage;
|
||||
|
||||
// // Function to handle custom click actions on the image
|
||||
// const handleImageClick = () => {
|
||||
// // Will be worked on later
|
||||
// };
|
||||
@ -1,4 +1,4 @@
|
||||
#OurSponsors {
|
||||
/* #OurSponsors {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
@ -48,4 +48,4 @@
|
||||
#OurSponsors h3 {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
*/
|
||||
|
||||
@ -1,15 +1,5 @@
|
||||
import React from 'react';
|
||||
import ImageSlider from '../Images/ImageSlider'; // Adjust the import path based on your directory structure
|
||||
import React from "react";
|
||||
|
||||
export default function Teams() {
|
||||
// return (
|
||||
// <p>Teams</p>
|
||||
// );
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>Image Slider</h1>
|
||||
<ImageSlider category="Members" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
return <p>Teams</p>;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user