let json = JSON.parse(text);
photos = json.photos;
photos.forEach(p => {
- p.btn = document.createElement("li");
- p.btn.innerText = p.desc;
- p.btn.addEventListener("click", () => {
- event.stopPropagation();
- loadPhoto(p);
- });
-
- p.thm = document.createElement("img");
- p.thm.alt = p.desc;
- p.thm.classList.add("thumbnail");
- p.thm.src = `/pictures/${p.name}_thm.jpg`;
+ let t = document.createElement("img");
+ t.alt = p.desc;
+ t.src = `/pictures/${p.name}_thm.jpg`;
+
+ p.thm = document.createElement("div");
+ p.thm.classList.add("thumb-tile");
+ p.thm.appendChild(t);
+ p.thm.addEventListener("click", () => {
+ event.stopPropagation();
+ loadPhoto(p);
+ });
p.img = document.createElement("img");
p.img.alt = p.desc;
});
}
+function keyDown(e) {
+ if (e.keyCode === 27 || e.keyCode === 32) {
+ console.log("close picture");
+ photo_dom.classList.add("hidden");
+ }
+}
+
function loadPhoto(p) {
removeAll(photo_dom);
console.log("load picture " + p.name);
photo_dom.appendChild(p.img);
+ photo_dom.classList.remove("hidden");
}
function loadCategory(m, node) {
} else {
state.push(s);
photos.filter(p => p[m] === s)
- .forEach(p => thumb_dom.appendChild(p.btn));
- node.appendChild(thumb_dom);
+ .forEach(p => thumb_dom.appendChild(p.thm));
a.forEach(e => {
e.classList.add("deselected")
xhttp.send();
cat_dom = document.createElement("ul");
- thumb_dom = document.createElement("ul");
+ thumb_dom = document.getElementById("thumbs");
meth_dom = document.getElementById("methods");
up_dom = document.getElementById("up");
photo_dom = document.getElementById("photo");
+ photo_dom.addEventListener("click", () => {
+ photo_dom.classList.add("hidden");
+ });
+
Array.from(meth_dom.children)
.forEach(e => {
e.addEventListener("click", () => {
loadMethod(e);
});
});
+
+ document.addEventListener("keydown", keyDown);
});
// })();
<script type="text/javascript" src="driver.js"></script>
</head>
<body class="parent">
- <div class="row parent">
- <div class="col-menu">
+ <div class="grid parent">
+ <div class="menu">
<ul id="methods">
Filter
<li id="loc">by Location</li>
<li id="date">by Date</li>
</ul>
</div>
- <div id="photo" class="col-img box">
+ <div id="thumbs" class="thumb-grid">
+ </div>
+ <div id="photo" class="photo-frame hidden">
</div>
- </div>
- <div id="thumb-bar">
</div>
<div>
</body>
name:loc:sub:date:desc
-20210618_0447:White Rock Cliff:Landscape:June 2021:Early Morning Sun Through the Trees
-20210618_0477:White Rock Cliff:Flora:June 2021:Triplet of Young Pine Cones
+20210618_0072::Cats:June 2021:Ali Napping
+20210618_0140:Patapsco:Flora:June 2021:Brown Ivy
+20210618_0170:UMBC:Flora:June 2021:Cat Tail
+20210618_0172:Great North Mountain:Flora:June 2021:Weathered Pine Cone
+20210618_0194:Great North Mountain:Fauna:June 2021:Snail on Lichen
+20210618_0204:UMBC:Architecture:June 2021:Arcing Walkway
+20210618_0246:Great North Mountain:Fauna:June 2021:Timber Rattlesnake
+20210618_0264:UMBC:Architecture:June 2021:Backlit Planter
+20210618_0270:Great North Mountain:Flora:June 2021:Maple Under-Canopy
+20210618_0310:Great North Mountain:Fauna:June 2021:Eastern Newt
+20210618_0312:Federal Hill:Architecture:June 2021:Brick Facade
+20210618_0447:White Rock Cliff:Landscape:June 2021:Early Morning Sun
+20210618_0451:White Rock Cliff:Landscape:June 2021:Fern Woods
+20210618_0464:White Rock Cliff:Landscape:June 2021:White Rock Cliff
+20210618_0472:Fell's Point:Architecture:June 2021:Chop House
+20210618_0477:White Rock Cliff:Flora:June 2021:Pine Cone Trio
+20210618_0508:White Rock Cliff:Flora:June 2021:Cliff Flowers
-{"photos":[{"name":"20210618_0447","loc":"White Rock Cliff","sub":"Landscape","date":"June 2021","desc":"Early Morning Sun Through the Trees"},{"name":"20210618_0477","loc":"White Rock Cliff","sub":"Flora","date":"June 2021","desc":"Triplet of Young Pine Cones"}],"name":["20210618_0447","20210618_0477"],"loc":["White Rock Cliff"],"sub":["Flora","Landscape"],"date":["June 2021"],"desc":["Triplet of Young Pine Cones","Early Morning Sun Through the Trees"]}
+{"photos":[{"name":"20210618_0072","loc":"","sub":"Cats","date":"June 2021","desc":"Ali Napping"},{"name":"20210618_0140","loc":"Patapsco","sub":"Flora","date":"June 2021","desc":"Brown Ivy"},{"name":"20210618_0170","loc":"UMBC","sub":"Flora","date":"June 2021","desc":"Cat Tail"},{"name":"20210618_0172","loc":"Great North Mountain","sub":"Flora","date":"June 2021","desc":"Weathered Pine Cone"},{"name":"20210618_0194","loc":"Great North Mountain","sub":"Fauna","date":"June 2021","desc":"Snail on Lichen"},{"name":"20210618_0204","loc":"UMBC","sub":"Architecture","date":"June 2021","desc":"Arcing Walkway"},{"name":"20210618_0246","loc":"Great North Mountain","sub":"Fauna","date":"June 2021","desc":"Timber Rattlesnake"},{"name":"20210618_0264","loc":"UMBC","sub":"Architecture","date":"June 2021","desc":"Backlit Planter"},{"name":"20210618_0270","loc":"Great North Mountain","sub":"Flora","date":"June 2021","desc":"Maple Under-Canopy"},{"name":"20210618_0310","loc":"Great North Mountain","sub":"Fauna","date":"June 2021","desc":"Eastern Newt"},{"name":"20210618_0312","loc":"Federal Hill","sub":"Architecture","date":"June 2021","desc":"Brick Facade"},{"name":"20210618_0447","loc":"White Rock Cliff","sub":"Landscape","date":"June 2021","desc":"Early Morning Sun"},{"name":"20210618_0451","loc":"White Rock Cliff","sub":"Landscape","date":"June 2021","desc":"Fern Woods"},{"name":"20210618_0464","loc":"White Rock Cliff","sub":"Landscape","date":"June 2021","desc":"White Rock Cliff"},{"name":"20210618_0472","loc":"Fell's Point","sub":"Architecture","date":"June 2021","desc":"Chop House"},{"name":"20210618_0477","loc":"White Rock Cliff","sub":"Flora","date":"June 2021","desc":"Pine Cone Trio"},{"name":"20210618_0508","loc":"White Rock Cliff","sub":"Flora","date":"June 2021","desc":"Cliff Flowers"}],"name":["20210618_0204","20210618_0172","20210618_0472","20210618_0310","20210618_0464","20210618_0270","20210618_0447","20210618_0312","20210618_0194","20210618_0508","20210618_0264","20210618_0246","20210618_0477","20210618_0140","20210618_0072","20210618_0170","20210618_0451"],"loc":["","White Rock Cliff","Great North Mountain","Fell's Point","UMBC","Federal Hill","Patapsco"],"sub":["Cats","Architecture","Fauna","Flora","Landscape"],"date":["June 2021"],"desc":["Fern Woods","Cliff Flowers","Maple Under-Canopy","Backlit Planter","Timber Rattlesnake","Weathered Pine Cone","Cat Tail","Snail on Lichen","White Rock Cliff","Brick Facade","Early Morning Sun","Eastern Newt","Chop House","Brown Ivy","Ali Napping","Pine Cone Trio","Arcing Walkway"]}
.parent { height: 95%; }
.deselected { color: #797777; }
.selected { color: #e3e2e2; }
+.hidden { display: none; }
body {
- background-color: #151515;
+ background-color: #161516;
color: #c3c2c2;
margin: 5%;
- font-size: x-large;
+ font-size: larger;
font-family: sans-serif;
}
+ul {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+}
+
+li {
+ line-height: 1.8;
+}
+
img {
max-width: 100%;
max-height: 100%;
}
-.col-menu {
- float: left;
- width: 20%;
- /* background: #451515; */
+.grid {
+ display: grid;
+ grid-template-columns: 15vw 70vw;
+ grid-column-gap: 5vw;
+}
+
+.menu {
+ display: inline grid;
+}
+
+.thumb-grid {
+ max-width: 1200px;
+ margin: 0 auto;
+ display: grid;
+ grid-gap: 1rem;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
-.col-img {
- float: right;
- width: 75%;
- padding: 20px;
- /* background: #151545; */
- height: 90%;
+.thumb-tile {
+ display: inline grid;
}
-.row:after {
- content: "";
- display: table;
- clear: both;
+.thumb-tile > img {
+ max-height: 160px;
+ max-width: 160px;
+ border-radius: 10px;
+ box-shadow: 5px 5px 5px #050404;
}
-.thumbnail {
- height: 100px;
- width: 100px;
- border-radius: 10%;
+.thumb-tile > img:hover {
+ animation-name: bounce;
+ animation-timing-function: ease-in-out;
+ animation-duration: 300ms;
+ box-shadow: 10px 10px 5px #050404;
+ transform: translate(0px, -2.5px);
}
+.thumb-tile > img:active {
+ animation-name: press;
+ animation-timing-function: ease-in-out;
+ animation-duration: 100ms;
+ box-shadow: 2px 2px 5px #050404;
+ transform: translate(0px, 1px);
+}
+
+@keyframes press {
+ 0% {
+ box-shadow: 10px 10px 5px #050404;
+ transform: translate(0px, -2.5px);
+ }
+ 100% {
+ box-shadow: 2px 2px 5px #050404;
+ transform: translate(0px, 1px);
+ }
+}
+
+@keyframes bounce {
+ 0% {
+ box-shadow: 5px 5px 5px #050404;
+ transform: translate(0px, 0px);
+ }
+ 20% {
+ box-shadow: 8px 8px 5px #050404;
+ transform: translate(0px, -1.0px);
+ }
+ 40% {
+ box-shadow: 10px 10px 5px #050404;
+ transform: translate(0px, -2.5px);
+ }
+ 60% {
+ box-shadow: 12px 12px 5px #050404;
+ transform: translate(0px, -4.0px);
+ }
+ 80% {
+ box-shadow: 8px 8px 5px #050404;
+ transform: translate(0px, -1.0px);
+ }
+ 100% {
+ box-shadow: 10px 10px 5px #050404;
+ transform: translate(0px, -2.5px);
+ }
+}
+
+.photo-frame {
+ position: fixed;
+ width: 100%;
+ height: 100%;
+ z-index: 100;
+ top: 0; bottom: 0;
+ left: 0; right: 0;
+ background-color: rgba(0,0,0,0.5);
+}
+.photo-frame > img {
+ max-width: 70%;
+ max-height: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ margin-top: 5vh;
+ margin-bottom: auto;
+ display: block;
+}
projects / photo-site.git / commitdiff