Skip to content

Commit

Permalink
Darken videos when unselected
Browse files Browse the repository at this point in the history
  • Loading branch information
@dominickp
dominickp committed May 27, 2024
1 parent 4b290a7 commit 7efda30
Show file tree
Hide file tree
Showing 2 changed files with 2 additions and 2 deletions.
2 changes: 1 addition & 1 deletion example-gallery/gal.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!doctype html><title>example-gallery</title><style>html{background-color:#000}main{display:grid;grid-template-columns:repeat(auto-fill,minmax(24rem,1fr));grid-template-rows:masonry;gap:.1rem}figure{position:relative;counter-increment:item-counter;margin:0}img,video{width:100%;height:auto;display:block;cursor:pointer}main.is-selecting figure:not(.toggling) img{opacity:.5}.hidden{display:none}.invisible{visibility:hidden}#filter-options{position:fixed;display:inline-block;right:0;top:0;z-index:1000;margin:20px}.visible-on-selecting{display:inline}a.button{cursor:pointer;box-sizing:border-box}#gallery-info{position:fixed;display:inline;right:0;top:34px;z-index:999;margin:20px;font-family:lucida sans,lucida sans regular,lucida grande,lucida sans unicode,Geneva,Verdana,sans-serif;background-color:rgba(0,0,0,.6);color:#fff;padding:2px 10px;border-radius:9px;font-size:14px}</style><script>function bootstrapSelecting(){var e,t=document.querySelector("main");t.classList.add("is-selecting"),e=document.querySelector("#filter-options .visible-on-selecting"),e.classList.remove("invisible")}function resetSelecting(){const e=document.querySelector("main");e.classList.remove("is-selecting");const t=document.querySelectorAll("main figure.card");for(const e of t)e.classList.remove("toggling"),e.classList.remove("hidden");const n=document.querySelector("#filter-options .visible-on-selecting");n.classList.add("invisible")}function filterSelection(){var e=document.querySelectorAll("main figure.card");for(const t of e)t.classList.contains("toggling")||t.classList.add("hidden")}function randomizeImageOrder(){var e=document.querySelector("main"),n=document.querySelectorAll("main figure"),t=Array.from(n);t.sort(()=>Math.random()-.5),e.innerHTML="";for(const n of t)e.appendChild(n)}function showGalleryInfo(){var e=document.querySelector("#gallery-info");e.classList.remove("invisible")}function hideGalleryInfo(){var e=document.querySelector("#gallery-info");e.classList.add("invisible")}function toggleImage(e){bootstrapSelecting();var n=e.target,t=n.parentElement;t.classList.contains("toggling")?t.classList.remove("toggling"):t.classList.add("toggling")}document.addEventListener("DOMContentLoaded",e=>{var t=document.querySelectorAll("main figure.card");for(const e of t)e.addEventListener("click",function(e){toggleImage(e),console.log("click")})})</script><div id=filter-options><div class="visible-on-selecting invisible"><a title="Reset gallery" class=button onclick=resetSelecting()>🔄</a><a title="Filter gallery" class=button onclick=filterSelection()>✅</a></div><a title="Randomize images" class=button onclick=randomizeImageOrder()>🔀</a><a class=button onmouseenter=showGalleryInfo() onmouseleave=hideGalleryInfo()>ℹ️</a></div><div id=gallery-info class=invisible>Created on May 27, 2024 at 6:16 PM - 46 images</div><main class=grid><figure class=card><img src=1.jpg></figure><figure class=card><img src=10.jpg></figure><figure class=card><img src=11.jpg></figure><figure class=card><img src=12.jpg></figure><figure class=card><img src=13.jpg></figure><figure class=card><img src=14.jpg></figure><figure class=card><img src=15.jpg></figure><figure class=card><img src=16.jpg></figure><figure class=card><img src=17.jpg></figure><figure class=card><img src=18.jpg></figure><figure class=card><img src=19.jpg></figure><figure class=card><img src=2.jpg></figure><figure class=card><img src=20.jpg></figure><figure class=card><img src=21.jpg></figure><figure class=card><img src=22.jpg></figure><figure class=card><img src=23.jpg></figure><figure class=card><img src=24.jpg></figure><figure class=card><img src=25.jpg></figure><figure class=card><img src=26.jpg></figure><figure class=card><img src=27.jpg></figure><figure class=card><img src=28.jpg></figure><figure class=card><img src=29.jpg></figure><figure class=card><video src=3.mp4 autoplay loop muted></figure><figure class=card><img src=30.jpg></figure><figure class=card><img src=31.jpg></figure><figure class=card><img src=32.jpg></figure><figure class=card><img src=33.jpg></figure><figure class=card><img src=34.jpg></figure><figure class=card><img src=35.jpg></figure><figure class=card><img src=36.jpg></figure><figure class=card><img src=37.jpg></figure><figure class=card><img src=38.jpg></figure><figure class=card><img src=39.jpg></figure><figure class=card><img src=4.jpg></figure><figure class=card><img src=40.jpg></figure><figure class=card><img src=41.jpg></figure><figure class=card><img src=42.jpg></figure><figure class=card><img src=43.jpg></figure><figure class=card><img src=44.jpg></figure><figure class=card><img src=45.jpg></figure><figure class=card><img src=46.jpg></figure><figure class=card><img src=5.jpg></figure><figure class=card><img src=6.jpg></figure><figure class=card><img src=7.jpg></figure><figure class=card><img src=8.jpg></figure><figure class=card><img src=9.jpg></figure></main>
<!doctype html><title>example-gallery</title><style>html{background-color:#000}main{display:grid;grid-template-columns:repeat(auto-fill,minmax(24rem,1fr));grid-template-rows:masonry;gap:.1rem}figure{position:relative;counter-increment:item-counter;margin:0}img,video{width:100%;height:auto;display:block;cursor:pointer}main.is-selecting figure:not(.toggling) img,main.is-selecting figure:not(.toggling) video{opacity:.5}.hidden{display:none}.invisible{visibility:hidden}#filter-options{position:fixed;display:inline-block;right:0;top:0;z-index:1000;margin:20px}.visible-on-selecting{display:inline}a.button{cursor:pointer;box-sizing:border-box}#gallery-info{position:fixed;display:inline;right:0;top:34px;z-index:999;margin:20px;font-family:lucida sans,lucida sans regular,lucida grande,lucida sans unicode,Geneva,Verdana,sans-serif;background-color:rgba(0,0,0,.6);color:#fff;padding:2px 10px;border-radius:9px;font-size:14px}</style><script>function bootstrapSelecting(){var e,t=document.querySelector("main");t.classList.add("is-selecting"),e=document.querySelector("#filter-options .visible-on-selecting"),e.classList.remove("invisible")}function resetSelecting(){const e=document.querySelector("main");e.classList.remove("is-selecting");const t=document.querySelectorAll("main figure.card");for(const e of t)e.classList.remove("toggling"),e.classList.remove("hidden");const n=document.querySelector("#filter-options .visible-on-selecting");n.classList.add("invisible")}function filterSelection(){var e=document.querySelectorAll("main figure.card");for(const t of e)t.classList.contains("toggling")||t.classList.add("hidden")}function randomizeImageOrder(){var e=document.querySelector("main"),n=document.querySelectorAll("main figure"),t=Array.from(n);t.sort(()=>Math.random()-.5),e.innerHTML="";for(const n of t)e.appendChild(n)}function showGalleryInfo(){var e=document.querySelector("#gallery-info");e.classList.remove("invisible")}function hideGalleryInfo(){var e=document.querySelector("#gallery-info");e.classList.add("invisible")}function toggleImage(e){bootstrapSelecting();var n=e.target,t=n.parentElement;t.classList.contains("toggling")?t.classList.remove("toggling"):t.classList.add("toggling")}document.addEventListener("DOMContentLoaded",e=>{var t=document.querySelectorAll("main figure.card");for(const e of t)e.addEventListener("click",function(e){toggleImage(e),console.log("click")})})</script><div id=filter-options><div class="visible-on-selecting invisible"><a title="Reset gallery" class=button onclick=resetSelecting()>🔄</a><a title="Filter gallery" class=button onclick=filterSelection()>✅</a></div><a title="Randomize images" class=button onclick=randomizeImageOrder()>🔀</a><a class=button onmouseenter=showGalleryInfo() onmouseleave=hideGalleryInfo()>ℹ️</a></div><div id=gallery-info class=invisible>Created on May 27, 2024 at 6:28 PM - 46 images</div><main class=grid><figure class=card><img src=1.jpg></figure><figure class=card><img src=10.jpg></figure><figure class=card><img src=11.jpg></figure><figure class=card><img src=12.jpg></figure><figure class=card><img src=13.jpg></figure><figure class=card><img src=14.jpg></figure><figure class=card><img src=15.jpg></figure><figure class=card><img src=16.jpg></figure><figure class=card><img src=17.jpg></figure><figure class=card><img src=18.jpg></figure><figure class=card><img src=19.jpg></figure><figure class=card><img src=2.jpg></figure><figure class=card><img src=20.jpg></figure><figure class=card><img src=21.jpg></figure><figure class=card><img src=22.jpg></figure><figure class=card><img src=23.jpg></figure><figure class=card><img src=24.jpg></figure><figure class=card><img src=25.jpg></figure><figure class=card><img src=26.jpg></figure><figure class=card><img src=27.jpg></figure><figure class=card><img src=28.jpg></figure><figure class=card><img src=29.jpg></figure><figure class=card><video src=3.mp4 autoplay loop muted></figure><figure class=card><img src=30.jpg></figure><figure class=card><img src=31.jpg></figure><figure class=card><img src=32.jpg></figure><figure class=card><img src=33.jpg></figure><figure class=card><img src=34.jpg></figure><figure class=card><img src=35.jpg></figure><figure class=card><img src=36.jpg></figure><figure class=card><img src=37.jpg></figure><figure class=card><img src=38.jpg></figure><figure class=card><img src=39.jpg></figure><figure class=card><img src=4.jpg></figure><figure class=card><img src=40.jpg></figure><figure class=card><img src=41.jpg></figure><figure class=card><img src=42.jpg></figure><figure class=card><img src=43.jpg></figure><figure class=card><img src=44.jpg></figure><figure class=card><img src=45.jpg></figure><figure class=card><img src=46.jpg></figure><figure class=card><img src=5.jpg></figure><figure class=card><img src=6.jpg></figure><figure class=card><img src=7.jpg></figure><figure class=card><img src=8.jpg></figure><figure class=card><img src=9.jpg></figure></main>
2 changes: 1 addition & 1 deletion template.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
display: block;
cursor: pointer;
}
main.is-selecting figure:not(.toggling) img {
main.is-selecting figure:not(.toggling) img, main.is-selecting figure:not(.toggling) video {
opacity: 0.5;
}
.hidden {
Expand Down

0 comments on commit 7efda30

Please sign in to comment.