From: Matthew Kousoulas Date: Mon, 21 Jun 2021 23:18:31 +0000 (-0400) Subject: Add Thumbnails X-Git-Url: http://gitweb.madkous.net/?a=commitdiff_plain;h=42d12856ff298ac6572e114db2f6dcf8d7fbba80;p=photo-site.git Add Thumbnails --- diff --git a/driver.js b/driver.js index d0ec188..d8cefe1 100644 --- a/driver.js +++ b/driver.js @@ -14,17 +14,17 @@ function loadJson(text) { 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; @@ -49,10 +49,18 @@ function loadJson(text) { }); } +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) { @@ -66,8 +74,7 @@ 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") @@ -126,12 +133,16 @@ document.addEventListener("DOMContentLoaded", 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", () => { @@ -139,5 +150,7 @@ document.addEventListener("DOMContentLoaded", loadMethod(e); }); }); + + document.addEventListener("keydown", keyDown); }); // })(); diff --git a/index.html b/index.html index 0902067..feadf2b 100644 --- a/index.html +++ b/index.html @@ -7,8 +7,8 @@ -
-
+
+
    Filter
  • by Location
    • @@ -16,10 +16,10 @@
  • by Date
-
+
+
+ -
-
diff --git a/pictures.csv b/pictures.csv index 61ebae7..5b65d63 100644 --- a/pictures.csv +++ b/pictures.csv @@ -1,3 +1,18 @@ 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 diff --git a/pictures.json b/pictures.json index 0b87d5a..342d394 100644 --- a/pictures.json +++ b/pictures.json @@ -1 +1 @@ -{"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"]} diff --git a/style.css b/style.css index 627c572..ec0de6a 100644 --- a/style.css +++ b/style.css @@ -1,44 +1,130 @@ .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; +}