wowchemy-hugo-themes custom gallery wont work online or after the first reload

Question

I am using wowchemy-hugo-themes starter-hugo-academic. The default gallery just open the image in a new page. I tried various codes, and as I think it might have interference with the main template code, I define new commands. But for all the various code that I implement the gallery modal only works locally (by using the hugo server command inside the VScode). Also, after the first reload all the new configuration will be gone and the images only open in the new page.

the main code was:

{{< gallery album="demo" >}}

Which I changed it to:

{{< gallery-custom album-custom="demo" >}}

I add a new file called gallery-custom.html in the layouts/shortcodes/

The code is:

{{/* Gallery Modal Shortcode for Wowchemy. */}}
{{/* Load gallery images from media library. */}}
{{/* https://github.com/wowchemy/wowchemy-hugo-themes */}}

{{/*
    Docs: https://wowchemy.com/docs/content/writing-markdown-latex/#image-gallery

    Parameters
    ----------
    album-custom : required
        Album folder in `assets/media/albums/` to load images from.
    order : default "asc"
        Sort images by title ascending (asc) or descending (desc).
    resize_options : default "750x750"
        Resize options passed to Hugo `.Fit` function (https://gohugo.io/content-management/image-processing/).
*/}}

{{/* For gallery nested in landing page sections */}}
{{ $.Page.Store.Set "has_gallery" true }}

{{/* Get album folder from album-custom parameter. */}}
{{ $album_custom := .Get "album-custom" }}
{{ $album_path := path.Join "media" "albums" $album_custom "*" }}

{{/* Gallery options */}}
{{ $sort_order := .Get "order" | default "asc" }}
{{ $resize_options := printf "%s webp" (.Get "resize_options" | default "750x750") }}

<div class="gallery-grid">

  {{/* Attempt to automatically load gallery images from page bundle */}}
  {{ $images := resources.Match $album_path }}
  {{ range (sort $images "Name" $sort_order) }}
    {{ $image := .Fit $resize_options }}
    {{/* Check if the user set a caption for this image */}}
    {{ $filename := path.Base .Name }}
    {{ $caption := "" }}
    {{ if $.Page.Params.gallery_item }}
      {{ range (where (where $.Page.Params.gallery_item "album" $album_custom) "image" $filename) }}
        {{ $caption = .caption }}
      {{ end }}
    {{ end }}
  {{ $image_size := "gallery-item--medium" }}
  {{if in .Name "-f." }}
    {{ $image_size = "gallery-item--full" }}
  {{else if in .Name "-s." }}
    {{ $image_size = "" }}
  {{else if in .Name "-l." }}
    {{ $image_size = "gallery-item--large" }}
  {{end}}
  <div class="gallery-item {{$image_size}}">
    <a data-fancybox="gallery-{{$album_custom}}" href="{{ .RelPermalink }}" {{ with $caption }}data-caption="{{.|markdownify|emojify|safeHTMLAttr}}"{{ end }}>
      <img src="{{ $image.RelPermalink }}" loading="lazy" alt="{{ plainify $caption | default $filename }}" width="{{ $image.Width }}" height="{{ $image.Height }}">
    </a>
  </div>
  {{else}}
    {{ errorf "Unable to load gallery `%s` in `%s`." $album_path .Page.File.Filename }}
  {{end}}

</div>

Why it happens?