add number text on slideshow, refactor names

assets/scss/snap-gallery.scss

@@ -1,6 +1,7 @@
 $gap: var(--gap);
 
-.snap-gallery-wrapper, .snap-slideshow-wrapper {
+.snap-gallery,
+.snap-slideshow {
   margin-bottom: $gap;
 
   /* Create equal columns in flexbox */
@@ -19,14 +20,14 @@ $gap: var(--gap);
   }
 }
 
-.snap-gallery-wrapper {
+.snap-gallery {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: $gap;
 }
 
-.snap-slideshow-wrapper {
+.snap-slideshow {
 
   // Hide all contained images except the first
   .snap-image:not(:first-child) {
@@ -85,16 +86,6 @@ $gap: var(--gap);
   max-height: 80%;
   height: 100%;
 
-  /* Number text (1/3 etc) */
-  .numbertext {
-    color: #f2f2f2;
-    background-color: #000;
-    font-size: 12px;
-    padding: 8px 12px;
-    position: absolute;
-    top: 10%;
-  }
-
   img {
     max-height: 100%;
   }
@@ -107,6 +98,18 @@ $gap: var(--gap);
   }
 }
 
+/* Number text (1/3 etc) */
+.snap-lightbox,
+.snap-slideshow {
+  .numbertext {
+    color: #f2f2f2;
+    background-color: #000;
+    font-size: 12px;
+    padding: 8px 12px;
+    position: absolute;
+  }
+}
+
 // /* Caption text */
 // .caption-container {
 //   text-align: center;

layouts/partials/gallery.html

@@ -1,6 +1,6 @@
 {{ $imgs := .imgs }}
 {{ $galno := .galno }}
-<div class="snap-gallery-wrapper" style="--columns:{{ default 4 .columns }};--min-width:{{ default 200 .minwidth }};--gap:10px;">
+<div class="snap-gallery" style="--columns:{{ default 4 .columns }};--min-width:{{ default 200 .minwidth }};--gap:10px;">
   {{ range $i, $img := $imgs }}
   <div class="snap-image">
     <img src="{{ $img }}" onclick="openLightbox({{ $galno }});openLightboxItem({{ $galno }}, {{ add $i 1 }});">

layouts/partials/slideshow.html

@@ -1,8 +1,9 @@
 {{ $imgs := .imgs }}
 {{ $galno := .galno }}
-<div class="snap-slideshow-wrapper" id="snap-slideshow-{{ $galno }}" style="--columns:1;--min-width:0px;--gap:0px;">
+<div class="snap-slideshow" id="snap-slideshow-{{ $galno }}" style="--columns:1;--min-width:0px;--gap:0px;">
   {{ range $i, $img := $imgs }}
   <div class="snap-image">
+    <div class="numbertext">{{ add $i 1 }} / {{ len $imgs }}</div>
     <img src="{{ $img }}" onclick="openLightbox({{ $galno }});openLightboxItem({{ $galno }}, {{ add $i 1 }});">
   </div>
   {{ end }}