diff --git a/layouts/shortcodes/snap-gallery.html b/layouts/shortcodes/snap-gallery.html
index 5218e06..07c68e0 100644
--- a/layouts/shortcodes/snap-gallery.html
+++ b/layouts/shortcodes/snap-gallery.html
@@ -1,9 +1,8 @@
-{{/*  TODO: Ensure CSS/JS is only loaded once  */}}
-{{- with resources.Get "scss/snap-gallery.scss" | toCSS }}
-<link rel="stylesheet" href="{{ .RelPermalink }}" crossorigin="anonymous">
-{{- end }}
+{{/*  Count number of gallery on page  */}}
+{{- $.Page.Scratch.Add "gallerycount" 1 -}}
+{{ $galno := $.Page.Scratch.Get "gallerycount" }}
 
-{{/*  Initialise variables  */}}
+{{/*  Initialise variables holding image paths  */}}
 {{ $imgs := slice }}
 
 {{/*  Get/sanitise image paths  */}}
@@ -24,13 +23,13 @@
 <div class="snap-wrapper">
 {{ range $i, $img := $imgs }}
   <div class="snap-image">
-    <img src="{{ $img }}" onclick="openModal();currentSlide({{ add $i 1 }});" class="hover-shadow">
+    <img src="{{ $img }}" onclick="openModal({{ $galno }});currentSlide({{ $galno }}, {{ add $i 1 }});" class="hover-shadow">
   </div>
 {{ end }}
 </div>
 
 {{/*  The Modal/Lightbox  */}}
-<div class="snap-lightbox">
+<div class="snap-lightbox" id="snap-lightbox-{{ $galno }}">
   {{ range $i, $img := $imgs }}
   <div class="snap-lightbox-inner">
     <div class="numbertext">{{ add $i 1 }} / {{ len $imgs }}</div>
@@ -39,12 +38,10 @@
   {{ end }}
 
   <!-- Close and Next/previous controls -->
-  <span class="snap-close" onclick="closeModal()">&times;</span>
+  <span class="snap-close" onclick="closeModal({{ $galno }})">&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>  */}}
+  <a class="snap-lightbox-prev" onclick="plusSlides({{ $galno }}, -1)"><i class="snap-lightbox-arrow"></i></a>
+  <a class="snap-lightbox-next" onclick="plusSlides({{ $galno }}, 1)"><i class="snap-lightbox-arrow"></i></a>
 
   {{/*  <!-- Caption text -->
   <div class="caption-container">
@@ -52,4 +49,11 @@
   </div>  */}}
 </div>
 
+
+{{/*  Load CSS/JS and make sure it is only loaded once  */}}
+{{- if eq ($.Page.Scratch.Get "gallerycount") 1 }}
+{{- with resources.Get "scss/snap-gallery.scss" | toCSS }}
+<link rel="stylesheet" href="{{ .RelPermalink }}" crossorigin="anonymous">
+{{- end }}
 <script src="/js/snap-gallery.js"></script>
+{{ end }}
diff --git a/static/js/snap-gallery.js b/static/js/snap-gallery.js
index 8c3820e..bd5dd80 100644
--- a/static/js/snap-gallery.js
+++ b/static/js/snap-gallery.js
@@ -1,29 +1,32 @@
 // Open the Modal
-function openModal() {
-  document.getElementsByClassName("snap-lightbox")[0].style.display = "block";
+function openModal(id) {
+  document.getElementById(baseid + id).style.display = "block";
 }
 
 // Close the Modal
-function closeModal() {
-  document.getElementsByClassName("snap-lightbox")[0].style.display = "none";
+function closeModal(id) {
+  document.getElementById(baseid + id).style.display = "none";
 }
 
+var baseid = "snap-lightbox-";
 var slideIndex = 1;
 showSlides(slideIndex);
 
+
 // Next/previous controls
-function plusSlides(n) {
-  showSlides(slideIndex += n);
+function plusSlides(id, n) {
+  showSlides(id, slideIndex += n);
 }
 
 // Thumbnail image controls
-function currentSlide(n) {
-  showSlides(slideIndex = n);
+function currentSlide(id, n) {
+  showSlides(id, slideIndex = n);
 }
 
-function showSlides(n) {
+function showSlides(id, n) {
   var i;
-  var slides = document.getElementsByClassName("snap-lightbox-inner");
+  var lightbox = document.getElementById(baseid + id);
+  var slides = lightbox.querySelectorAll(".snap-lightbox-inner");
   if (n > slides.length) { slideIndex = 1 }
   if (n < 1) { slideIndex = slides.length }
   for (i = 0; i < slides.length; i++) {