JS code working in Local but wont work Online (github website)

[Armanasq]

Hi all!

Why does the gallery mode functionality disappear when I upload the site to GitHub, even though it works when I run it locally using hugo server -D?

Step 1: Create a new partial
First, create a new partial file for the modal window. In your Hugo project, navigate to the layouts/partials directory and create a new file named gallery-modal.html. Add the following code to the file:

<div id="galleryModal" class="modal">
  <span class="close">&times;</span>
  <img class="modal-content" id="modalImage">
</div>

<script>
  // Get the modal
  var modal = document.getElementById("galleryModal");

  // Get the image and insert it inside the modal - use its "alt" text as a caption
  var img = document.getElementById("modalImage");
  var modalImg = document.getElementById("modalImage");

  function openModal(imageSrc) {
    modal.style.display = "block";
    modalImg.src = imageSrc;
  }

  // When the user clicks on <span> (x), close the modal
  document.getElementsByClassName("close")[0].onclick = function () {
    modal.style.display = "none";
  };
</script>

Step 2: Modify the gallery shortcode
Next, you need to modify the gallery.html shortcode file in the layouts/shortcodes directory. Open the file and locate the {{ $relref := .Page.RelPermalink }} line. Below that line, add the following code:

{{ $relref := .Page.RelPermalink }}
{{ with .Get "album" }}
  {{ range (where .Site.Pages "Type" "in" (slice "jpg" "jpeg" "png" "gif")) }}
    <a href="#" onclick="openModal('{{ $relref }}{{ .RelPermalink }}')">
      <img src="{{ $relref }}{{ .RelPermalink }}" alt="{{ .Name }}" />
    </a>
  {{ end }}
{{ end }}

Step 3: Add CSS styles
Finally, add the necessary CSS styles to your theme. Open the assets/scss/custom.scss file and add the following code:

/* Gallery Modal */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 9999; /* Sit on top */
  padding-top: 50px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content,
#caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
 

 color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

when I click on an image in the gallery, the modal window open with the clicked image displayed.

[Armanasq]

Any ideas?