georges/layouts/index.html

{{ define "pagename" -}}
<!-- -->
{{- end }}

{{ define "main" }}
  {{ .Content }}
  <div
      id="blueimp-gallery"
      class="blueimp-gallery blueimp-gallery-controls"
      aria-label="image gallery"
      aria-modal="true"
      role="dialog"
      >
      <div class="slides" aria-live="polite"></div>
      <h3 class="title"></h3>
      <a
          class="prev"
          aria-controls="blueimp-gallery"
          aria-label="previous slide"
          aria-keyshortcuts="ArrowLeft"
          ></a>
      <a
          class="next"
          aria-controls="blueimp-gallery"
          aria-label="next slide"
          aria-keyshortcuts="ArrowRight"
          ></a>
      <a
          class="close"
          aria-controls="blueimp-gallery"
          aria-label="close"
          aria-keyshortcuts="Escape"
          ></a>
      <a
          class="play-pause"
          aria-controls="blueimp-gallery"
          aria-label="play slideshow"
          aria-keyshortcuts="Space"
          aria-pressed="false"
          role="button"
          ></a>
      <ol class="indicator"></ol>
  </div>

  {{ range .Params.georgespics }}
  <div class="galleryblock">
    <div class="blockhead">
      <h2>
        {{- .name }}
        {{ with .osm -}}
          <a class="osmlink" href="{{ . }}"><i class="fa fa-map-marker" aria-hidden="true"></i>
          </a>
        {{- end -}}
      </h2>
      <div class="gallerydate">
        {{ time.Format "January 2006" .date }}
      </div>
    </div>

    <div class="gallery">
      {{ range .pics }}
      <a href="{{ .path }}">
        <img src="{{ .path }}" />
      </a>
      {{ end }}
    </div>
  </div>
  {{ end }}
{{ end }}

{{ define "extrajs" }}
<script src="blueimp/js/blueimp-gallery.min.js"></script>
<script>
    var galleries = document.getElementsByClassName('gallery');
    for(gallery of galleries) {
      gallery.onclick = function (event) {
        event = event || window.event
        var target = event.target || event.srcElement
        var link = target.src ? target.parentNode : target
        var options = { index: link, event: event }
        var links = this.getElementsByTagName('a')
        blueimp.Gallery(links, options)
      }
    }
</script>
{{ end }}