-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
254 lines (242 loc) · 11.8 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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Cat Room</title>
<link rel = "icon" type = "image/x-icon" href = "media/Orange-tabby favicon.png">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/main_nav_header.css">
<link rel="stylesheet" href="css/trigger_modal.css">
<link rel="stylesheet" href="css/lightbox.css">
<script src="./js/lightbox-plus-jquery.js"></script>
</head>
<body>
<div class="bg">
<header class="nav-header-main">
<div class="header-main-logo">
<img src="media/logo02.jpg" alt="logo">
<nav class="header-main-nav"> <!-- put <nav></nav> outside header-main-logo to center -->
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="foster.html">Fosters</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</div>
<div class="header-main-sm">
<a href="https://www.facebook.com/AACAnimalCareControl "><div class="header-main-sm-fb"></div></a>
<div class="header-main-sm-in"></div>
<div class="header-main-sm-tw"></div>
</div>
</header>
<div class="title">
<h1>The Cat Room</h1>
</div>
</div>
<br>
<div>
<h3><center> <a href="https://www.aacounty.org/animal-control">
Adoptable Cats at Anne Arundel County Animal Care & Control</a> </center> </h3>
<br>
<h3><center>411 Maxwell Frye Road, Millersville, MD 21108 </center></h3>
<br>
<h3><center> <script> document.write(new Date().toLocaleDateString())</script></center></h3>
<div>
<center>
<img class ="myImages"
id="myImg" src="stats/Cat_LOS_2024-12-17.png"
alt = "LOS" width="50"height="50">
<img class ="myImages"
id="myImg" src="stats/Cat_Ages_2024-12-17.png"
alt = "Age" width="50"height="50">
<img class ="myImages"
id="myImg" src="stats/cat_dog_status_count_2024-12-17.png"
alt = "Status" width="50"height="50">
<img class ="myImages"
id="myImg" src="stats/System_2024-12-17.png"
alt = "Category" width="50"height="50">
</center>
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<! End of Modal Trigger Section -->
<div class = "lbcontainer">
<div class = "gallery">
<a href = "images/524908AIR POD.jpeg" data-Lightbox = "models"
data-title="Not Altered, DOMESTIC SHORT HAIR, In the Shelter for 14 Days" >
<img src ="thumbs/524908AIR POD_T.jpeg" alt = "AIR POD">
</a>
<a href = "images/525050BEASLEY.jpeg" data-Lightbox = "models"
data-title="Altered, DOMESTIC MEDIUM HAIR, In the Shelter for 5 Days" >
<img src ="thumbs/525050BEASLEY_T.jpeg" alt = "BEASLEY">
</a>
<a href = "images/524117BEN.jpeg" data-Lightbox = "models"
data-title="Altered, DOMESTIC SHORT HAIR, In the Shelter for 68 Days" >
<img src ="thumbs/524117BEN_T.jpeg" alt = "BEN">
</a>
<a href = "images/524662BOO.jpeg" data-Lightbox = "models"
data-title="Not Altered, DOMESTIC MEDIUM HAIR, In the Shelter for 34 Days" >
<img src ="thumbs/524662BOO_T.jpeg" alt = "BOO">
</a>
<a href = "images/524968CANDY.jpeg" data-Lightbox = "models"
data-title="Not Altered, DOMESTIC SHORT HAIR, In the Shelter for 10 Days" >
<img src ="thumbs/524968CANDY_T.jpeg" alt = "CANDY">
</a>
<a href = "images/524116CANE.jpeg" data-Lightbox = "models"
data-title="Altered, DOMESTIC SHORT HAIR, In the Shelter for 68 Days" >
<img src ="thumbs/524116CANE_T.jpeg" alt = "CANE">
</a>
<a href = "images/524640CHIMNEY SWEEP.jpeg" data-Lightbox = "models"
data-title="Altered, DOMESTIC SHORT HAIR, In the Shelter for 40 Days" >
<img src ="thumbs/524640CHIMNEY SWEEP_T.jpeg" alt = "CHIMNEY SWEEP">
</a>
<a href = "images/524677CHOCOLATE SAUCE.jpeg" data-Lightbox = "models"
data-title="Altered, DOMESTIC SHORT HAIR, In the Shelter for 33 Days" >
<img src ="thumbs/524677CHOCOLATE SAUCE_T.jpeg" alt = "CHOCOLATE SAUCE">
</a>
<a href = "images/523799DINNER ROLL.jpeg" data-Lightbox = "models"
data-title="Altered, DOMESTIC SHORT HAIR, In the Shelter for 85 Days" >
<img src ="thumbs/523799DINNER ROLL_T.jpeg" alt = "DINNER ROLL">
</a>
<a href = "images/524604FAX MACHINE.jpeg" data-Lightbox = "models"
data-title="Not Altered, DOMESTIC SHORT HAIR, In the Shelter for 38 Days" >
<img src ="thumbs/524604FAX MACHINE_T.jpeg" alt = "FAX MACHINE">
</a>
<a href = "images/523784FLAKY TURNOVER.jpeg" data-Lightbox = "models"
data-title="Altered, DOMESTIC SHORT HAIR, In the Shelter for 85 Days" >
<img src ="thumbs/523784FLAKY TURNOVER_T.jpeg" alt = "FLAKY TURNOVER">
</a>
<a href = "images/524938HOT COCOA.jpeg" data-Lightbox = "models"
data-title="Altered, SIAMESE, In the Shelter for 12 Days" >
<img src ="thumbs/524938HOT COCOA_T.jpeg" alt = "HOT COCOA">
</a>
<a href = "images/524592KIT.jpeg" data-Lightbox = "models"
data-title="Altered, DOMESTIC SHORT HAIR, In the Shelter for 39 Days" >
<img src ="thumbs/524592KIT_T.jpeg" alt = "KIT">
</a>
<a href = "images/524795KITTY CUTIE-FACE.jpeg" data-Lightbox = "models"
data-title="Not Altered, DOMESTIC SHORT HAIR, In the Shelter for 25 Days" >
<img src ="thumbs/524795KITTY CUTIE-FACE_T.jpeg" alt = "KITTY CUTIE-FACE">
</a>
<a href = "images/508672MAGGIE.jpeg" data-Lightbox = "models"
data-title="Altered, DOMESTIC SHORT HAIR, In the Shelter for 286 Days" >
<img src ="thumbs/508672MAGGIE_T.jpeg" alt = "MAGGIE">
</a>
<a href = "images/524367MAJOR LEAGUE.jpeg" data-Lightbox = "models"
data-title="Not Altered, DOMESTIC MEDIUM HAIR, In the Shelter for 54 Days" >
<img src ="thumbs/524367MAJOR LEAGUE_T.jpeg" alt = "MAJOR LEAGUE">
</a>
<a href = "images/525042MELODY.jpeg" data-Lightbox = "models"
data-title="Altered, DOMESTIC SHORT HAIR, In the Shelter for 6 Days" >
<img src ="thumbs/525042MELODY_T.jpeg" alt = "MELODY">
</a>
<a href = "images/524962MEOWSICLE.jpeg" data-Lightbox = "models"
data-title="Not Altered, DOMESTIC SHORT HAIR, In the Shelter for 11 Days" >
<img src ="thumbs/524962MEOWSICLE_T.jpeg" alt = "MEOWSICLE">
</a>
<a href = "images/525048MICKEY.jpeg" data-Lightbox = "models"
data-title="Altered, DOMESTIC SHORT HAIR, In the Shelter for 5 Days" >
<img src ="thumbs/525048MICKEY_T.jpeg" alt = "MICKEY">
</a>
<a href = "images/525059MINNIE MOUSE.jpeg" data-Lightbox = "models"
data-title="Altered, DOMESTIC MEDIUM HAIR, In the Shelter for 4 Days" >
<img src ="thumbs/525059MINNIE MOUSE_T.jpeg" alt = "MINNIE MOUSE">
</a>
<a href = "images/524809MISTLETOE MANIA.jpeg" data-Lightbox = "models"
data-title="Not Altered, DOMESTIC SHORT HAIR, In the Shelter for 24 Days" >
<img src ="thumbs/524809MISTLETOE MANIA_T.jpeg" alt = "MISTLETOE MANIA">
</a>
<a href = "images/524958MR. FLUFF.jpeg" data-Lightbox = "models"
data-title="Altered, DOMESTIC MEDIUM HAIR, In the Shelter for 11 Days" >
<img src ="thumbs/524958MR. FLUFF_T.jpeg" alt = "MR. FLUFF">
</a>
<a href = "images/524830NAVEL.jpeg" data-Lightbox = "models"
data-title="Altered, DOMESTIC SHORT HAIR, In the Shelter for 21 Days" >
<img src ="thumbs/524830NAVEL_T.jpeg" alt = "NAVEL">
</a>
<a href = "images/524797PEACH MOSCATO.jpeg" data-Lightbox = "models"
data-title="Not Altered, DOMESTIC SHORT HAIR, In the Shelter for 24 Days" >
<img src ="thumbs/524797PEACH MOSCATO_T.jpeg" alt = "PEACH MOSCATO">
</a>
<a href = "images/524909PEPPER POTTS.jpeg" data-Lightbox = "models"
data-title="Altered, DOMESTIC SHORT HAIR, In the Shelter for 13 Days" >
<img src ="thumbs/524909PEPPER POTTS_T.jpeg" alt = "PEPPER POTTS">
</a>
<a href = "images/524935POOTIE.jpeg" data-Lightbox = "models"
data-title="Not Altered, DOMESTIC SHORT HAIR, In the Shelter for 12 Days" >
<img src ="thumbs/524935POOTIE_T.jpeg" alt = "POOTIE">
</a>
<a href = "images/524959PUMPKIN.jpeg" data-Lightbox = "models"
data-title="Altered, DOMESTIC SHORT HAIR, In the Shelter for 11 Days" >
<img src ="thumbs/524959PUMPKIN_T.jpeg" alt = "PUMPKIN">
</a>
<a href = "images/524866SAUCE PAN.jpeg" data-Lightbox = "models"
data-title="Not Altered, DOMESTIC SHORT HAIR, In the Shelter for 17 Days" >
<img src ="thumbs/524866SAUCE PAN_T.jpeg" alt = "SAUCE PAN">
</a>
<a href = "images/523761SID.jpeg" data-Lightbox = "models"
data-title="Altered, DOMESTIC SHORT HAIR, In the Shelter for 87 Days" >
<img src ="thumbs/523761SID_T.jpeg" alt = "SID">
</a>
<a href = "images/524868SMOKEY.jpeg" data-Lightbox = "models"
data-title="Altered, DOMESTIC SHORT HAIR, In the Shelter for 17 Days" >
<img src ="thumbs/524868SMOKEY_T.jpeg" alt = "SMOKEY">
</a>
<a href = "images/524934SPLIT PEA SOUP.jpeg" data-Lightbox = "models"
data-title="Altered, DOMESTIC SHORT HAIR, In the Shelter for 12 Days" >
<img src ="thumbs/524934SPLIT PEA SOUP_T.jpeg" alt = "SPLIT PEA SOUP">
</a>
<a href = "images/524838SPRANKLE.jpeg" data-Lightbox = "models"
data-title="Altered, DOMESTIC SHORT HAIR, In the Shelter for 21 Days" >
<img src ="thumbs/524838SPRANKLE_T.jpeg" alt = "SPRANKLE">
</a>
<a href = "images/524997TUTU.jpeg" data-Lightbox = "models"
data-title="Altered, DOMESTIC LONG HAIR, In the Shelter for 7 Days" >
<img src ="thumbs/524997TUTU_T.jpeg" alt = "TUTU">
</a>
<a href = "images/523678VANILLA FROSTING.jpeg" data-Lightbox = "models"
data-title="Altered, DOMESTIC SHORT HAIR, In the Shelter for 89 Days" >
<img src ="thumbs/523678VANILLA FROSTING_T.jpeg" alt = "VANILLA FROSTING">
</a>
<a href = "images/524716ZARA.jpeg" data-Lightbox = "models"
data-title="Not Altered, DOMESTIC SHORT HAIR, In the Shelter for 29 Days" >
<img src ="thumbs/524716ZARA_T.jpeg" alt = "ZARA">
</a>
<a href = "images/524706ZOOMIES.jpeg" data-Lightbox = "models"
data-title="Altered, DOMESTIC SHORT HAIR, In the Shelter for 33 Days" >
<img src ="thumbs/524706ZOOMIES_T.jpeg" alt = "ZOOMIES">
</a>
</div>
</div>
<!-- End of index.html Section (Constant) -->
<script>
// create references to the modal...
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('myImages');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
console.log(evt);
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
</script>
</body>
</html>