-
Notifications
You must be signed in to change notification settings - Fork 0
/
photoGallery.html
155 lines (138 loc) · 7.65 KB
/
photoGallery.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html>
<head>
<title>Media
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/photoStyles.css">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Inconsolata">
<link href='https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap' rel="stylesheet">
<link rel="icon" href="Images/logowhite.png" type="image/ico">
<script>
let currentPos = 0;
let imagesLoaded = false;
const images = [];
const captions = ["The B and C team compete", "Another photo of the B and C team", "Sam sets up her autonomous for testing before the competition starts, while Max talks to Mr. Good", "Autonomous testing", "The 2021-2022 team photo", "The B and C team work together to win the match", "The B and C team work together", "The A team discusses their strategy with their teammate", "Molly and Sam focus on the match", "The A team works with their teammate to score as many points as they can", "The C team checks the score for the last match while they wait to start", "The B and P team get teamed up for their last qualifying match", "The B and C teams count up their score after autonomous", "The B and C team competing together", "The C team focuses as they compete", "The bus ride to a competition", "The P team waits with their teammates for the autonomous period to start", "The B team waits with their teammates for the autonomous period to start", "The B team watches as Max's code runs", "The A team talks with a teammate about their plan", "The A team competes", "Sam helps out her teammate after she parks on the platform", "Sam and Molly watch the code run", "Jaret and Kayla wait for the match to begin. Bernie and Sammy are also here", "Brandon dances for the camera while his team waits", "More dancing", "The B team waits for their match to start", "John and Charlene pose with parked Jared, then call Sam a 'soccer mom' for taking photos", "The P team competes", "Sammy and Bernie join each team when they compete", "Selfies while standing in the skills line", "Brandon celebrates after their team wins the quarterfinal match", "Bus shenanigans"]
const numOfImages = 33
for (i = 1; i <= numOfImages; i++){
images[i-1] = "Images/GalleryImages/" + i + ".jpg";
}
function flipImage(){
document.getElementById("imageSlides").src = images[currentPos];
document.getElementById("displayText").textContent = captions[currentPos];
}
function nextButton() {
if (currentPos == numOfImages-1){
currentPos = 0;
}
else {
currentPos++;
}
flipImage();
}
function backButton() {
if (currentPos == 0) {
currentPos = numOfImages-1;
}
else {
currentPos--;
}
flipImage();
}
</script>
</head>
<body>
<!-- MENU BAR -->
<div class="menuBar">
<div class="menuContent">
<div class="menuGrid">
<div class="menuLogo">
<img src="Images/logowhite.png" width=70px>
<h2 class="menuTitle">PHSN Robotics Club</h2></div>
<a class="menuOption" href="home.html">Home</a>
<a class="menuOption" href="teams.html">Our Teams</a>
<a class="menuOption" href="resources.html">Resources</a>
<a class="menuOption" href="competition.html">The Competition</a>
<a class="menuOption" href="clubHistory.html">Club History</a>
<a class="menuOption" href="contact.html">Contact Us</a>
</div>
</div>
</div>
<!-- MENU FOR MOBILE -->
<div class="mobileMenu">
<div class="visibleMenu">
<div class="menuContent">
<div class="menuGrid">
<div class="menuLogo">
<img src="Images/logowhite.png" width=70px>
<h2 class="menuTitle">PHSN Robotics Club</h2></div>
<div></div>
<a class="menuOption" href="home.html">Home</a>
<!-- competition reseources -->
<div class="dropdown">
<button class="dropButton">Competiton</button>
<div class="dropContent">
<a class="menuOption" href="teams.html">Our Teams</a>
<a class="menuOption" href="resources.html">Resources</a>
<a class="menuOption" href="competition.html">The Competition</a>
</div>
</div>
<a class="menuOption" href="clubHistory.html">Club History</a>
<a class="menuOption" href="contact.html">Contact Us</a>
</div>
</div>
</div>
</div>
<div id="wrapper">
<h1>Media Gallery</h1>
<p>We take many photos and videos throughout our seasons to capture all of our competitions. The full videos and images can be found in our <a href="https://drive.google.com/drive/u/0/folders/1--9rWKpprzs9TcBkJpIdEwRS6MOkyZRI">Google Drive folder</a>. We have also linked any livestreams from the competiton hosts</p>
<div>
<h2>2021-2022 Season</h2>
<h4>Photo Gallery</h4>
<div class="imgcontainer">
<button class="buttonL" onclick="backButton()"><img src="Images/arrow.png"></button>
<img id="imageSlides" src="Images/GalleryImages/1.jpg">
<button class="buttonR" onclick="nextButton()"><img src="Images/arrow.png"></button>
<div></div>
<p id="displayText">The B and C team compete</p>
</div>
<h4>Livestreams</h4>
<div>
<ul>
<li><a href="https://www.youtube.com/watch?v=mO_R5MTUZgA">2021 Picktown Throw Down VEX Qualifier (12/4/21)</a></li>
</ul>
</div>
</div>
<hr>
<div>
<h2>Artwork</h2>
<p>Some of our members are talented with their art abilites and they have created our logos and art of the robots. The original files can be found and downloaded <a href="https://drive.google.com/drive/u/0/folders/1TaofnADVuD-OlZnJKzQPXwUcr_PAhqmb">here</a></p>
</div>
</div>
<!-- footer -->
<div class="footer">
<div class="footerGrid">
<div>
<img src="Images/logowhite.png" width="70px">
<h3>PHSN Robotics</h3>
</div>
<div>
<h3>Pickerington High School North:</h3>
<h5>7800 Refugee Rd, Pickerington, OH 43147</h5>
</div>
<div>
<a class="hoverFlip" href=https://discord.gg/hqBYrPHxad target=”_blank”>
<img src="Images/discord%20purple.png" width="30px">
<img class="top" src="Images/discord.png" width="30px">
</a>
</div>
<div>
<a href="photoGallery.html">Photos</a>
</div>
<div><h5 class="credit">Website created by: Samantha Smith</h5>
<p class="smallText">PHSN Robotics Member 2018-2022<p></div>
</div>
</div>
</body>
</html>