{{ define "main" }} <h1>{{ .Title }}</h1> {{ .Content }} {{ $files := readDir "/static/images/screenshots/" }} {{ range $index, $element := $files }} {{ $fileTitle := (index (split .Name "-") 1) }} {{ $fileTitle := (index (split $fileTitle ".") 0) }} <div class="popup-gallery col-lg-3 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="/images/screenshots/{{ .Name }}" title="{{ $fileTitle }}"> <img class="img-responsive nearest-neighbor" src="/images/screenshots/thumbs/{{ .Name }}"> </a> </div> {{ end }} {{ end }} {{ define "scripts" }} <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js" integrity="sha256-P93G0oq6PBPWTP1IR8Mz/0jHHUpaWL0aBJTKauisG7Q=" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" integrity="sha256-PZLhE6wwMbg4AB3d35ZdBF9HD/dI/y4RazA3iRDurss=" crossorigin="anonymous" /> <script type="text/javascript"> $(document).ready(function() { $('.popup-gallery').magnificPopup({ delegate: 'a', type: 'image', tLoading: 'Loading image #%curr%...', mainClass: 'mfp-img-mobile', gallery: { enabled: true, navigateByImgClick: true, preload: [0, 1] // Will preload 0 - before current, and 1 after the current image }, image: { tError: '<a href="%url%">The image #%curr%</a> could not be loaded.', titleSrc: function(item) { return item.el.attr('title'); } } }); }); </script> {{ end }}