-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2 from dominickp/fix-video2
Darken videos when unselected
- Loading branch information
Showing
2 changed files
with
2 additions
and
2 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 |
|---|---|---|
| @@ -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> |
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