-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
9 changed files
with
435 additions
and
198 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
|
|
||
| <head> | ||
| <title>AA191A GeoJSONs and Loops Lab</title> | ||
|
|
||
| <meta charset="utf-8" /> | ||
| <link rel="shortcut icon" href="#"> | ||
| <link rel="stylesheet" href="styles/gallery.css"> | ||
| <link rel="preconnect" href="https://fonts.googleapis.com"> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | ||
| <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet"> | ||
| </head> | ||
|
|
||
| <body> | ||
|
|
||
| <header> | ||
| <h1>GALLERY! ^_< ☆</h1> | ||
| <a href="index.html">go back</a> | ||
| </header> | ||
|
|
||
| <main> | ||
|
|
||
| <!-- hint: majority of your lab assignment can go here --> | ||
| <div class="col1"> | ||
| <button onclick="openPopup(1)" class="placeholder-img"></button> | ||
| <button onclick="openPopup(2)" class="placeholder-img"></button> | ||
| </div> | ||
|
|
||
| <div class="col2"> | ||
| <button onclick="openPopup(3)" class="placeholder-img"></button> | ||
| <button onclick="openPopup(4)" class="placeholder-img"></button> | ||
| </div> | ||
| </main> | ||
|
|
||
| <div id="popup"> | ||
| <div id="content"> | ||
| <button class="closeButton" onclick="closePopup()">X</button> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div id="footer"> | ||
| <p>COPYRIGHT 2024</p> | ||
| </div> | ||
|
|
||
| </body> | ||
|
|
||
| <script> | ||
| function createImage(img_id) { | ||
| const newImage = document.createElement("img"); | ||
| newImage.id = "display-img"; | ||
| newImage.src = "images/image.jpg"; | ||
| newImage.setAttribute("alt", "Placeholder image " + img_id); | ||
| document.getElementById("content").appendChild(newImage); | ||
|
|
||
| } | ||
|
|
||
| function openPopup(img_id) { | ||
| let hash = "#image_" + img_id; | ||
| window.location = hash; | ||
| document.getElementById("popup").style.visibility = "visible"; | ||
| createImage(img_id); | ||
| } | ||
|
|
||
| function closePopup() { | ||
| document.getElementById("popup").style.visibility = "hidden"; | ||
| window.location = ""; | ||
| document.getElementById("display-img").remove(); | ||
| } | ||
|
|
||
| if (window.location.hash) { | ||
| let image_id = window.location.hash; | ||
| image_id = image_id.charAt(image_id.length - 1); | ||
| openPopup(image_id); | ||
| } | ||
| </script> | ||
|
|
||
| </html> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+968 Bytes
week3/images/photo-icon-picture-icon-image-sign-symbol-vector-illustration_64749-4409.avif
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| { | ||
| "type": "FeatureCollection", | ||
| "features": [ | ||
| { | ||
| "type": "Feature", | ||
| "properties": { | ||
| "name": "Zhujiajiao", | ||
| "district": "Qingpu District", | ||
| "city": "Shanghai", | ||
| "desc": "Super pretty water town with lots of historic architecture and yummy food." | ||
| }, | ||
| "geometry": { | ||
| "coordinates": [ | ||
| 121.05079163809194, | ||
| 31.113422651979562 | ||
| ], | ||
| "type": "Point" | ||
| } | ||
| }, | ||
| { | ||
| "type": "Feature", | ||
| "properties": { | ||
| "name": "Leifeng Pagoda", | ||
| "district": "Xihu District", | ||
| "city": "Hangzhou", | ||
| "desc": "Originally a Buddhist tower that has been rebuilt over the years. I sadly didn't have time to go see the view from the topmost level." | ||
| }, | ||
| "geometry": { | ||
| "coordinates": [ | ||
| 120.14494204232636, | ||
| 30.233352123539035 | ||
| ], | ||
| "type": "Point" | ||
| } | ||
| }, | ||
| { | ||
| "type": "Feature", | ||
| "properties": { | ||
| "name": "Humble Administrator's Garden", | ||
| "district": "Gusu District", | ||
| "city": "Suzhou", | ||
| "desc": "A part of the Classical Gardens of Suzhou. The lotus ponds were really pretty!" | ||
| }, | ||
| "geometry": { | ||
| "coordinates": [ | ||
| 120.62533357835912, | ||
| 31.325210071401756 | ||
| ], | ||
| "type": "Point" | ||
| } | ||
| }, | ||
| { | ||
| "type": "Feature", | ||
| "properties": { | ||
| "name": "Nanjing Fuzimiao", | ||
| "district": "Qinhuai District", | ||
| "city": "Nanjing", | ||
| "desc": "A Confucius Temple where the imperial exam was held. There's a museum on the same street with a cheatsheet from the Qing Dynasty on display. As expected, the handwriting is tiny, haha." | ||
| }, | ||
| "geometry": { | ||
| "coordinates": [ | ||
| 118.78434984973381, | ||
| 32.02188820240707 | ||
| ], | ||
| "type": "Point" | ||
| } | ||
| } | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| @import "style.css"; | ||
|
|
||
| /* Defines the page layout using a grid */ | ||
| main { | ||
| grid-area: main; | ||
| display: grid; | ||
| grid-template-areas: "col1 col2"; | ||
| grid-template-columns: 1fr 1fr; | ||
| } | ||
|
|
||
| /* Assigns each major section to a part of the grid */ | ||
| .col1 { | ||
| grid-area: col1; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: flex-end; | ||
| padding-right:10px; | ||
| } | ||
|
|
||
| .col2 { | ||
| grid-area: col2; | ||
| display: flex; | ||
| flex-direction: column; | ||
| padding-left:10px; | ||
| } | ||
|
|
||
| .placeholder-img { | ||
| width: 75%; | ||
| height: 100%; | ||
| background: url("../images/image.jpg"); | ||
| background-size: cover; | ||
| background-position: center; | ||
|
|
||
| border: none; | ||
| margin:10px; | ||
| } | ||
|
|
||
| #popup { | ||
| visibility: hidden; | ||
| position:fixed; | ||
| padding:0; | ||
| margin:0; | ||
|
|
||
| top:0; | ||
| left:0; | ||
|
|
||
| width: 100%; | ||
| height: 100%; | ||
| background:rgba(0, 0, 0, 0.8); | ||
| } | ||
|
|
||
| .closeButton { | ||
| margin-right: 0; | ||
| width: 20px; | ||
| margin: 5px; | ||
| background-color: white; | ||
| border: solid; | ||
| border-width: 2px; | ||
|
|
||
| font-weight:bold; | ||
| } | ||
| .closeButton:hover { | ||
| color: #0088ff; | ||
| border-color:#0088ff; | ||
| } | ||
|
|
||
| #content { | ||
| width:75%; | ||
| height:75%; | ||
| background-color: white; | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| top: 50%; | ||
| left: 50%; | ||
| transform: translate(-50%, -50%); | ||
|
|
||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: flex-end; | ||
| } | ||
|
|
||
| #display-img { | ||
| height: 100%; | ||
| width: auto; | ||
| margin-bottom: 2.5%; | ||
| align-self: center; | ||
| } |
Oops, something went wrong.