{{/* https://www.geeksforgeeks.org/how-to-make-image-gallery-using-html-css-and-javascript/ */}}
{{/*
Add this to your config yaml to serve images from `static/albums``

module:
  mounts:
    source: static/albums
    target: assets/albums


*/}}

{{ $dir := string .Params.gallery_dir }}

<div class="gallery">
{{ range (readDir (print "/static" $dir)) }}
  {{- $imageurl := printf "%s/%s" $dir .Name -}}
  {{- $image := resources.Get $imageurl -}}
  {{- $imagetitle := index (split .Name ".") 0 -}}
    {{- if eq $image nil -}}
    {{ return }}
    {{- else -}}
    <div class="gallery-item">
        <img src="{{ $image.Permalink }}"
            onclick="openModal('{{ $image.Permalink }}')"
            alt="{{ $imagetitle }}">
    </div>
    {{- end -}}
{{ end }}
</div>

<!-- Modal for Image Display -->
<div id="myModal" class="modal">
    <span class="close" onclick="closeModal()">&times;</span>
    <img class="modal-content" id="modalImage">
</div>

<!-- JavaScript for Modal -->
<script>    
    function openModal(src) {
        document.getElementById("modalImage").src = src;
        document.getElementById("myModal").style.display = "block";
    }

    function closeModal() {
        document.getElementById("myModal").style.display = "none";
    }
</script>