Add video support

dominickp · Apr 29, 2024 · 0118da0 · 0118da0
1 parent 710b75e
commit 0118da0
Show file tree

Hide file tree

Showing 50 changed files with 26 additions and 3 deletions.
diff --git a/example-gallery/image-1 ' (2).jpg → example-gallery/1.jpg b/example-gallery/image-1 ' (2).jpg → example-gallery/1.jpg
diff --git a/example-gallery/image-2_2.jpg → example-gallery/10.jpg b/example-gallery/image-2_2.jpg → example-gallery/10.jpg
diff --git a/example-gallery/image-2_3.jpg → example-gallery/11.jpg b/example-gallery/image-2_3.jpg → example-gallery/11.jpg
diff --git a/example-gallery/image-3 (2).jpg → example-gallery/12.jpg b/example-gallery/image-3 (2).jpg → example-gallery/12.jpg
diff --git a/example-gallery/image-3.jpg → example-gallery/13.jpg b/example-gallery/image-3.jpg → example-gallery/13.jpg
diff --git a/example-gallery/image-3_1.jpg → example-gallery/14.jpg b/example-gallery/image-3_1.jpg → example-gallery/14.jpg
diff --git a/example-gallery/image-3_2.jpg → example-gallery/15.jpg b/example-gallery/image-3_2.jpg → example-gallery/15.jpg
diff --git a/example-gallery/image-3_3.jpg → example-gallery/16.jpg b/example-gallery/image-3_3.jpg → example-gallery/16.jpg
diff --git a/example-gallery/image-4 (2).jpg → example-gallery/17.jpg b/example-gallery/image-4 (2).jpg → example-gallery/17.jpg
diff --git a/example-gallery/image-4.jpg → example-gallery/18.jpg b/example-gallery/image-4.jpg → example-gallery/18.jpg
diff --git a/example-gallery/image-4_1.jpg → example-gallery/19.jpg b/example-gallery/image-4_1.jpg → example-gallery/19.jpg
diff --git a/example-gallery/image-1.jpg → example-gallery/2.jpg b/example-gallery/image-1.jpg → example-gallery/2.jpg
diff --git a/example-gallery/image-4_2.jpg → example-gallery/20.jpg b/example-gallery/image-4_2.jpg → example-gallery/20.jpg
diff --git a/example-gallery/image-4_3.jpg → example-gallery/21.jpg b/example-gallery/image-4_3.jpg → example-gallery/21.jpg
diff --git a/example-gallery/image-5 (2).jpg → example-gallery/22.jpg b/example-gallery/image-5 (2).jpg → example-gallery/22.jpg
diff --git a/example-gallery/image-5.jpg → example-gallery/23.jpg b/example-gallery/image-5.jpg → example-gallery/23.jpg
diff --git a/example-gallery/image-9_1.jpg → example-gallery/24.jpg b/example-gallery/image-9_1.jpg → example-gallery/24.jpg
diff --git a/example-gallery/image-8_1.jpg → example-gallery/25.jpg b/example-gallery/image-8_1.jpg → example-gallery/25.jpg
diff --git a/example-gallery/image-7 (2).jpg → example-gallery/26.jpg b/example-gallery/image-7 (2).jpg → example-gallery/26.jpg
diff --git a/example-gallery/image-8 (2).jpg → example-gallery/27.jpg b/example-gallery/image-8 (2).jpg → example-gallery/27.jpg
diff --git a/example-gallery/image-6_2.jpg → example-gallery/28.jpg b/example-gallery/image-6_2.jpg → example-gallery/28.jpg
diff --git a/example-gallery/image-10 (2).jpg → example-gallery/29.jpg b/example-gallery/image-10 (2).jpg → example-gallery/29.jpg
diff --git a/example-gallery/3.mp4 b/example-gallery/3.mp4
diff --git a/example-gallery/image-10.jpg → example-gallery/30.jpg b/example-gallery/image-10.jpg → example-gallery/30.jpg
diff --git a/example-gallery/image-10_1.jpg → example-gallery/31.jpg b/example-gallery/image-10_1.jpg → example-gallery/31.jpg
diff --git a/example-gallery/image-10_2.jpg → example-gallery/32.jpg b/example-gallery/image-10_2.jpg → example-gallery/32.jpg
diff --git a/example-gallery/image-7_2.jpg → example-gallery/33.jpg b/example-gallery/image-7_2.jpg → example-gallery/33.jpg
diff --git a/example-gallery/image-7_1.jpg → example-gallery/34.jpg b/example-gallery/image-7_1.jpg → example-gallery/34.jpg
diff --git a/example-gallery/image-7.jpg → example-gallery/35.jpg b/example-gallery/image-7.jpg → example-gallery/35.jpg
diff --git a/example-gallery/image-9 (2).jpg → example-gallery/36.jpg b/example-gallery/image-9 (2).jpg → example-gallery/36.jpg
diff --git a/example-gallery/image-8_2.jpg → example-gallery/37.jpg b/example-gallery/image-8_2.jpg → example-gallery/37.jpg
diff --git a/example-gallery/image-9.jpg → example-gallery/38.jpg b/example-gallery/image-9.jpg → example-gallery/38.jpg
diff --git a/example-gallery/image-9_2.jpg → example-gallery/39.jpg b/example-gallery/image-9_2.jpg → example-gallery/39.jpg
diff --git a/example-gallery/image-1_1.jpg → example-gallery/4.jpg b/example-gallery/image-1_1.jpg → example-gallery/4.jpg
diff --git a/example-gallery/image-5_3.jpg → example-gallery/40.jpg b/example-gallery/image-5_3.jpg → example-gallery/40.jpg
diff --git a/example-gallery/image-5_1.jpg → example-gallery/41.jpg b/example-gallery/image-5_1.jpg → example-gallery/41.jpg
diff --git a/example-gallery/image-5_2.jpg → example-gallery/42.jpg b/example-gallery/image-5_2.jpg → example-gallery/42.jpg
diff --git a/example-gallery/image-6 (2).jpg → example-gallery/43.jpg b/example-gallery/image-6 (2).jpg → example-gallery/43.jpg
diff --git a/example-gallery/image-6.jpg → example-gallery/44.jpg b/example-gallery/image-6.jpg → example-gallery/44.jpg
diff --git a/example-gallery/image-6_1.jpg → example-gallery/45.jpg b/example-gallery/image-6_1.jpg → example-gallery/45.jpg
diff --git a/example-gallery/image-8.jpg → example-gallery/46.jpg b/example-gallery/image-8.jpg → example-gallery/46.jpg
diff --git a/example-gallery/image-1_2.jpg → example-gallery/5.jpg b/example-gallery/image-1_2.jpg → example-gallery/5.jpg
diff --git a/example-gallery/image-1_3.jpg → example-gallery/6.jpg b/example-gallery/image-1_3.jpg → example-gallery/6.jpg
diff --git a/example-gallery/image-2 (2).jpg → example-gallery/7.jpg b/example-gallery/image-2 (2).jpg → example-gallery/7.jpg
diff --git a/example-gallery/image-2.jpg → example-gallery/8.jpg b/example-gallery/image-2.jpg → example-gallery/8.jpg
diff --git a/example-gallery/image-2_1.jpg → example-gallery/9.jpg b/example-gallery/image-2_1.jpg → example-gallery/9.jpg
diff --git a/example-gallery/gal.html b/example-gallery/gal.html
@@ -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{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(){var e,t,n,s=document.querySelector("main");s.classList.remove("is-selecting"),t=document.querySelectorAll("main figure img");for(const n of t)e=n.parentElement,e.classList.remove("toggling"),e.classList.remove("hidden");n=document.querySelector("#filter-options .visible-on-selecting"),n.classList.add("invisible")}function filterSelection(){var e=document.querySelectorAll("main figure img");for(const t of e)t.parentElement.classList.contains("toggling")||t.parentElement.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 img");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 April 29, 2024 at 3:01 PM - 45 images</div><main class=grid><figure class=card><img src="image-1 ' (2).jpg"></figure><figure class=card><img src=image-1.jpg></figure><figure class=card><img src='image-10 (2).jpg'></figure><figure class=card><img src=image-10.jpg></figure><figure class=card><img src=image-10_1.jpg></figure><figure class=card><img src=image-10_2.jpg></figure><figure class=card><img src=image-1_1.jpg></figure><figure class=card><img src=image-1_2.jpg></figure><figure class=card><img src=image-1_3.jpg></figure><figure class=card><img src='image-2 (2).jpg'></figure><figure class=card><img src=image-2.jpg></figure><figure class=card><img src=image-2_1.jpg></figure><figure class=card><img src=image-2_2.jpg></figure><figure class=card><img src=image-2_3.jpg></figure><figure class=card><img src='image-3 (2).jpg'></figure><figure class=card><img src=image-3.jpg></figure><figure class=card><img src=image-3_1.jpg></figure><figure class=card><img src=image-3_2.jpg></figure><figure class=card><img src=image-3_3.jpg></figure><figure class=card><img src='image-4 (2).jpg'></figure><figure class=card><img src=image-4.jpg></figure><figure class=card><img src=image-4_1.jpg></figure><figure class=card><img src=image-4_2.jpg></figure><figure class=card><img src=image-4_3.jpg></figure><figure class=card><img src='image-5 (2).jpg'></figure><figure class=card><img src=image-5.jpg></figure><figure class=card><img src=image-5_1.jpg></figure><figure class=card><img src=image-5_2.jpg></figure><figure class=card><img src=image-5_3.jpg></figure><figure class=card><img src='image-6 (2).jpg'></figure><figure class=card><img src=image-6.jpg></figure><figure class=card><img src=image-6_1.jpg></figure><figure class=card><img src=image-6_2.jpg></figure><figure class=card><img src='image-7 (2).jpg'></figure><figure class=card><img src=image-7.jpg></figure><figure class=card><img src=image-7_1.jpg></figure><figure class=card><img src=image-7_2.jpg></figure><figure class=card><img src='image-8 (2).jpg'></figure><figure class=card><img src=image-8.jpg></figure><figure class=card><img src=image-8_1.jpg></figure><figure class=card><img src=image-8_2.jpg></figure><figure class=card><img src='image-9 (2).jpg'></figure><figure class=card><img src=image-9.jpg></figure><figure class=card><img src=image-9_1.jpg></figure><figure class=card><img src=image-9_2.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{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(){var e,t,n,s=document.querySelector("main");s.classList.remove("is-selecting"),t=document.querySelectorAll("main figure img");for(const n of t)e=n.parentElement,e.classList.remove("toggling"),e.classList.remove("hidden");n=document.querySelector("#filter-options .visible-on-selecting"),n.classList.add("invisible")}function filterSelection(){var e=document.querySelectorAll("main figure img");for(const t of e)t.parentElement.classList.contains("toggling")||t.parentElement.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 img");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 April 29, 2024 at 3:14 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>
diff --git a/main.go b/main.go
@@ -46,6 +46,13 @@ func createHTMLGallery(template, directoryAbsolutePath string, images []fs.FileI
 	galleryInfo := fmt.Sprintf("Created on %s - %d images", time.Now().Format("January 2, 2006 at 3:04 PM"), len(images))
 	galleryContents := ""
 	for _, image := range images {
+		if fileIsVideo(image) {
+			galleryContents += fmt.Sprintf(`
+			<figure class='card'>
+				<video src='%s' autoplay loop muted/>
+			</figure>`, h.EscapeString(image.Name()))
+			continue
+		}
 		galleryContents += fmt.Sprintf(`
 		<figure class='card'>
 			<img src='%s' />

diff --git a/template.html b/template.html
@@ -17,7 +17,7 @@
         counter-increment: item-counter;
         margin: 0;
       }
-      img {
+      img, video {
         width: 100%;
         height: auto;
         display: block;

diff --git a/util.go b/util.go
@@ -47,6 +47,22 @@ func openBrowser(url string, browser string) error {
 	return exec.Command(cmd, args...).Start()
 }
 
+func fileIsVideo(file fs.FileInfo) bool {
+	videoFileTypes := []string{
+		".mp4",
+		".webm",
+		".ogg",
+		".mov",
+		".mpg",
+	}
+	for _, fileType := range videoFileTypes {
+		if strings.HasSuffix(file.Name(), fileType) {
+			return true
+		}
+	}
+	return false
+}
+
 // fileIsImage checks if a file is a browser-compatible image based on its extension
 func fileIsImage(file fs.FileInfo) bool {
 	// https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types
@@ -79,7 +95,7 @@ func getImagesInDirectory(afs afero.Fs, dir string) []fs.FileInfo {
 	}
 	images := []fs.FileInfo{}
 	for _, file := range files {
-		if fileIsImage(file) {
+		if fileIsImage(file) || fileIsVideo(file) {
 			images = append(images, 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{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(){var e,t,n,s=document.querySelector("main");s.classList.remove("is-selecting"),t=document.querySelectorAll("main figure img");for(const n of t)e=n.parentElement,e.classList.remove("toggling"),e.classList.remove("hidden");n=document.querySelector("#filter-options .visible-on-selecting"),n.classList.add("invisible")}function filterSelection(){var e=document.querySelectorAll("main figure img");for(const t of e)t.parentElement.classList.contains("toggling")\|\|t.parentElement.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 img");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 April 29, 2024 at 3:01 PM - 45 images</div><main class=grid><figure class=card><img src="image-1 ' (2).jpg"></figure><figure class=card><img src=image-1.jpg></figure><figure class=card><img src='image-10 (2).jpg'></figure><figure class=card><img src=image-10.jpg></figure><figure class=card><img src=image-10_1.jpg></figure><figure class=card><img src=image-10_2.jpg></figure><figure class=card><img src=image-1_1.jpg></figure><figure class=card><img src=image-1_2.jpg></figure><figure class=card><img src=image-1_3.jpg></figure><figure class=card><img src='image-2 (2).jpg'></figure><figure class=card><img src=image-2.jpg></figure><figure class=card><img src=image-2_1.jpg></figure><figure class=card><img src=image-2_2.jpg></figure><figure class=card><img src=image-2_3.jpg></figure><figure class=card><img src='image-3 (2).jpg'></figure><figure class=card><img src=image-3.jpg></figure><figure class=card><img src=image-3_1.jpg></figure><figure class=card><img src=image-3_2.jpg></figure><figure class=card><img src=image-3_3.jpg></figure><figure class=card><img src='image-4 (2).jpg'></figure><figure class=card><img src=image-4.jpg></figure><figure class=card><img src=image-4_1.jpg></figure><figure class=card><img src=image-4_2.jpg></figure><figure class=card><img src=image-4_3.jpg></figure><figure class=card><img src='image-5 (2).jpg'></figure><figure class=card><img src=image-5.jpg></figure><figure class=card><img src=image-5_1.jpg></figure><figure class=card><img src=image-5_2.jpg></figure><figure class=card><img src=image-5_3.jpg></figure><figure class=card><img src='image-6 (2).jpg'></figure><figure class=card><img src=image-6.jpg></figure><figure class=card><img src=image-6_1.jpg></figure><figure class=card><img src=image-6_2.jpg></figure><figure class=card><img src='image-7 (2).jpg'></figure><figure class=card><img src=image-7.jpg></figure><figure class=card><img src=image-7_1.jpg></figure><figure class=card><img src=image-7_2.jpg></figure><figure class=card><img src='image-8 (2).jpg'></figure><figure class=card><img src=image-8.jpg></figure><figure class=card><img src=image-8_1.jpg></figure><figure class=card><img src=image-8_2.jpg></figure><figure class=card><img src='image-9 (2).jpg'></figure><figure class=card><img src=image-9.jpg></figure><figure class=card><img src=image-9_1.jpg></figure><figure class=card><img src=image-9_2.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{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(){var e,t,n,s=document.querySelector("main");s.classList.remove("is-selecting"),t=document.querySelectorAll("main figure img");for(const n of t)e=n.parentElement,e.classList.remove("toggling"),e.classList.remove("hidden");n=document.querySelector("#filter-options .visible-on-selecting"),n.classList.add("invisible")}function filterSelection(){var e=document.querySelectorAll("main figure img");for(const t of e)t.parentElement.classList.contains("toggling")\|\|t.parentElement.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 img");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 April 29, 2024 at 3:14 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>