hugo-snap-gallery/layouts/shortcodes/snap-gallery.html

{{/*  TODO: Ensure CSS/JS is only loaded once  */}}
{{- with resources.Get "css/snap-gallery.scss" | toCSS | fingerprint }}
<link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
{{- end }}
<script src="/js/snap-gallery.js"></script>

{{/*  Initialise variables  */}}
{{ $imgs := slice }}

{{/*  Get/sanitise image paths  */}}
{{ if .Params.isdir }}
  {{/*  Get images from folder, put into map  */}}
  {{ $imgdir := print "/static/" .Params.src }}
  {{- range readDir $imgdir -}}
  {{ $imgs = $imgs | append (print $.Params.src "/" .Name ) }}
  {{ end }}
{{ else }}
  {{/*  Get images from src Param, separated by comma  */}}
  {{ range (split .Params.src ",") }}
    {{ $imgs = $imgs | append (trim . " ") }}
  {{ end }}
{{ end }}

{{/*  Visible images  */}}
<div class="row">
{{ range $i, $img := $imgs }}
  <div class="column">
    <img src="{{ $img }}" onclick="openModal();currentSlide({{ add $i 1 }});" class="hover-shadow">
  </div>
{{ end }}
</div>

{{/*  The Modal/Lightbox  */}}
<div id="myModal" class="modal">
  <span class="close cursor" onclick="closeModal()">&times;</span>
  <div class="modal-content">

    {{ range $i, $img := $imgs }}
    <div class="mySlides">
      <div class="numbertext">{{ add $i 1 }} / {{ len $imgs }}</div>
      <img src="{{ $img }}" style="width:100%">
    </div>
    {{ end }}

    <!-- Next/previous controls -->
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>

    <!-- Caption text -->
    <div class="caption-container">
      <p id="caption"></p>
    </div>

    <!-- Thumbnail image controls -->
    {{ range $i, $img := $imgs }}
    <div class="column">
      <img class="demo" src="{{ $img }}" onclick="currentSlide({{ add $i 1 }})" alt="Nature">
    </div>
    {{ end }}
  </div>
</div>