Justified Image Gallery as Hugo shortcode

foldergallery.html

<!-- \layouts\shortcodes\foldergallery.html -->

<style>
    div.gallery {
        display: flex;
        flex-wrap: wrap;
    }
    
    div.gallery a {
        flex-grow: 1;
        object-fit: cover;
        margin: 2px;
        display: flex;
    }

    div.gallery a img {            
        height: 200px;
        object-fit: cover;
        flex-grow: 1;
    }
</style>

<div class="gallery">
    {{ $path := print "content\\" .Page.Dir (.Get "src") }}
    {{ $url  := print .Page.URL (.Get "src") }}
    {{ range (readDir $path)  }}            
        {{ $src := print $url "/" .Name }}                
        <a data-fancybox="gallery" href="{{ $src }}">
            <img src="{{ $src }}">  <br/>            
        </a>
    {{ end }}
</div>

footer_custom.html

<!-- \layouts\partials\footer_custom.html -->
<!-- IMPORTANT: Remove any references in older versions of jquery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.0/jquery.fancybox.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.0/jquery.fancybox.min.css" />