rework CSS and JS

layouts/shortcodes/snap-gallery.html

@@ -2,7 +2,6 @@
 {{- with resources.Get "scss/snap-gallery.scss" | toCSS }}
 <link rel="stylesheet" href="{{ .RelPermalink }}" crossorigin="anonymous">
 {{- end }}
-<script src="/js/snap-gallery.js"></script>
 
 {{/*  Initialise variables  */}}
 {{ $imgs := slice }}
@@ -31,31 +30,26 @@
 </div>
 
 {{/*  The Modal/Lightbox  */}}
-<div id="snap-modal" class="modal">
-  <span class="close cursor" onclick="closeModal()">&times;</span>
-  <div class="modal-content">
-
-    {{ range $i, $img := $imgs }}
-    <div class="snap-slide">
-      <div class="numbertext">{{ add $i 1 }} / {{ len $imgs }}</div>
-      <img src="{{ $img }}" style="width:100%">
-    </div>
-    {{ end }}
-
-    <!-- Next/previous controls -->
-    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
-    <a class="next" onclick="plusSlides(1)">&#10095;</a>
-
-    <!-- Caption text -->
-    <div class="caption-container">
-      <p id="caption"></p>
-    </div>
-
-    <!-- Thumbnail image controls -->
-    {{/*  {{ range $i, $img := $imgs }}
-    <div class="snap-image">
-      <img class="img-thumb" src="{{ $img }}" onclick="currentSlide({{ add $i 1 }})" alt="Nature">
-    </div>
-    {{ end }}  */}}
+<div class="snap-lightbox">
+  {{ range $i, $img := $imgs }}
+  <div class="snap-lightbox-inner">
+    <div class="numbertext">{{ add $i 1 }} / {{ len $imgs }}</div>
+    <img src="{{ $img }}" style="width:100%">
   </div>
+  {{ end }}
+
+  <!-- Close and Next/previous controls -->
+  <span class="snap-close" onclick="closeModal()">&times;</span>
+
+  <a class="snap-lightbox-prev" onclick="plusSlides(-1)"><i class="snap-lightbox-arrow"></i></a>
+  <a class="snap-lightbox-next" onclick="plusSlides(1)"><i class="snap-lightbox-arrow"></i></a>
+  {{/*  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
+  <a class="next" onclick="plusSlides(1)">&#10095;</a>  */}}
+
+  {{/*  <!-- Caption text -->
+  <div class="caption-container">
+    <p id="caption"></p>
+  </div>  */}}
 </div>
+
+<script src="/js/snap-gallery.js"></script>