cleanly handle multiple galleries on one page

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++) {