{{ $style := resources.Get "simplelightbox/simple-lightbox.css" }}

<link rel="stylesheet" href="{{ $style.Permalink }}">

<style>

    * {
        box-sizing: border-box;
    }

    .container .gallery a img {
        float: left;
        width: 10%;
        height: auto;
        border: 2px solid #fff;
        -webkit-transition: -webkit-transform .15s ease;
        -moz-transition: -moz-transform .15s ease;
        -o-transition: -o-transform .15s ease;
        -ms-transition: -ms-transform .15s ease;
        transition: transform .15s ease;
        position: relative;
    }

    .clear {
        clear: both;
    }

    a {
        color: #009688;
        text-decoration: none;
    }

    a:hover {
        color: #01695f;
        text-decoration: none;
    }
</style>

<div class="container">
  <h1 class="f2">
      Bilder des Tages  
  </h1>
  <div class="gallery">
    {{ $page := . }}
    {{ with .Resources.Match "images/*"  }}
      {{ range . }}
        {{ $gallary_img := .Fill "300x300" }}
        {{ $text := "" }}
        {{ if isset $page.Params "captions" }}
          {{ range first 1 (where $page.Params.captions "name" .Name) }}
            {{ $text = .text }}
          {{ end }}
        {{ end }}
        <a href="{{.Permalink}}">
        <img style="max-width: 100%; width: auto; height: auto;" src="{{ $gallary_img.RelPermalink }}" 
        width="{{ .Width }}" height="{{ .Height }}" alt="{{ .Title }}" title={{ $text }}>
        </a>
      {{ end }}
    {{ end }}
    <div class="clear"></div>
  </div>
</div>

{{ $js := resources.Get "simplelightbox/simple-lightbox.min.js" }}

<script src="{{ $js.Permalink }}"></script>

<script>
    (function() {
        var $gallery = new SimpleLightbox('.gallery a', {docClose:false, widthRatio:1, heightRatio:1});
    })();
</script>