-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
134 lines (107 loc) · 3.61 KB
/
index.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
<!DOCTYPE html>
<html>
<style>
#header {
display: flex;
justify-content: center;
}
#content {
display: flex;
flex-direction: column;
align-items: center;
}
#mainDisplay{
margin-top: 3%;
}
#mainDisplay img {
width: 50vh;
border: 3px solid black;
}
#thumbnailsContainer {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
/* margin-top: 5%; */
}
.thumbnail {
position: relative; /* Set position context for absolute positioning of the button */
margin: 5px;
display: flex;
flex-direction: column;
align-items: center;
background-color: gray;
border: 3px solid black;
}
.thumbnail img {
margin: 0;
width: 10vh;
object-fit: cover; /* This will make sure to cover the area without stretching the image */
}
.thumbnail button {
position: absolute; /* Position the button over the image */
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* Center the button */
}
</style>
<body>
<div id='header'>
<h1>Aspen's Adventure Gallery</h1>
</div>
<div id='content'>
<div id="mainDisplay">
<img id="mainDisplayImage" src="assets/placeholder.png"/>
</div>
<h3>Select an image to view</h3>
<div id='thumbnailsContainer'>
<div id="thumbnail1" class='thumbnail'>
<img src="assets/Aspen1.jpg" class="thumbnailImage">
<button id="thumbnail1Button">View</button>
</div>
<div id="thumbnail2" class='thumbnail'>
<img src="assets/Aspen2.jpg" class="thumbnailImage">
<button id="thumbnail2Button">View</button>
</div>
<div id="thumbnail3" class='thumbnail'>
<img src="assets/Aspen3.jpg" class="thumbnailImage">
<button id="thumbnail3Button">View</button>
</div>
<div id="thumbnail4" class='thumbnail'>
<img src="assets/Aspen4.jpg" class="thumbnailImage">
<button id="thumbnail4Button">View</button>
</div>
<div id="thumbnail5" class='thumbnail'>
<img src="assets/Aspen5.jpg" class="thumbnailImage">
<button id="thumbnail5Button">View</button>
</div>
<div id="thumbnail6" class='thumbnail'>
<img src="assets/Aspen6.jpg" class="thumbnailImage">
<button id="thumbnail6Button">View</button>
</div>
<div id="thumbnail7" class='thumbnail'>
<img src="assets/Aspen7.jpg" class="thumbnailImage">
<button id="thumbnail7Button">View</button>
</div>
<div id="thumbnail8" class='thumbnail'>
<img src="assets/Aspen8.jpg" class="thumbnailImage">
<button id="thumbnail8Button">View</button>
</div>
</div>
</div>
</body>
<script>
// PART 1
let thumbnail1ButtonHTML = document.getElementById("thumbnail1Button")
thumbnail1ButtonHTML.addEventListener(function(){
//*** YOUR JAVASCRIPT CODE HERE ***
})
let thumbnail2ButtonHTML = document.getElementById("thumbnail2Button")
thumbnail2ButtonHTML.addEventListener(function(){
//*** YOUR JAVASCRIPT CODE HERE ***
})
let thumbnail3ButtonHTML = document.getElementById("thumbnail3Button")
thumbnail3ButtonHTML.addEventListener(function(){
//*** YOUR JAVASCRIPT CODE HERE ***
})
</script>
</html>