Custom JS code won't work online

[Armanasq]

Preliminary Checks

• [X] This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/wowchemy/wowchemy-hugo-themes/issues?q=is%3Aissue
• [X] This issue is not a question, feature request, or anything other than a bug report directly related to Wowchemy. Please post those things on Discord: https://discord.gg/z8wNYzb

Description

I am using wowchemy-hugo-themes starter-hugo-academic. I added a custom JS and CS code to add Gallery mode to the website. It works fine when I run the code locally. However, the gallery mode functionality disappear when I upload the site to GitHub. I have checked the uploaded code via chrome inspect to make sure that the style and script are correctly loaded in the website

I use the code below

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.

Reproduction Link

https://github.com/Armanasq/Armanasq.github.io

Steps to Reproduce

1. 2. 3. ...

Expected Result

Show the Gallery mode for the images

Actual Result

Load the image in a new paged

What Hugo Module versions does your site use?

1. github.com/wowchemy/wowchemy-hugo-themes/modules/wowchemy-plugin-netlify version v1.0.0

2. github.com/wowchemy/wowchemy-hugo-themes/modules/wowchemy-plugin-netlify-cms version v1.0.0

3. github.com/wowchemy/wowchemy-hugo-themes/modules/wowchemy-plugin-reveal version v1.0.0

4. github.com/wowchemy/wowchemy-hugo-themes/modules/wowchemy/v5 version v5.7.1-0.20230420205746-951c7b6f709d

What operating system(s) are you seeing the problem on?

Linux

What browser(s) are you seeing the problem on?

Chrome

Which Wowchemy template are you using?

starter-hugo-academic

What version of Hugo are you using?

hugo v0.114.1-e9b716ad9869b79e7c374bbdae4daf5ee6406bd4+extended linux/amd64 BuildDate=2023-06-23T11:02:58Z VendorInfo=snap:0.114.1

[Armanasq]

Any ideas?

[gcushen]

Please don't spam support questions in multiple places. Also, this is not the place for support questions - it's for project management.

[Armanasq]

I asked multiple times in the past weeks but no one answered. Also, it seems that its an issue related to github.com/wowchemy/wowchemy-hugo-themes/modules/ which does not allow to change the code and override any custom codes