image-gallery.html (1325B)
1 <style> 2 .image-gallery {overflow: auto; margin-left: -1%!important;} 3 .image-gallery li {float: left; display: block; margin: 0 0 1% 1%; width: 19%;} 4 .image-gallery li a {text-align: center; text-decoration: none!important; color: #777;} 5 .image-gallery li a span {display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding: 3px 0;} 6 .image-gallery li a img {width: 100%; display: block;} 7 .image-gallery .bigpic {max-height: 500px; display: block; margin: auto auto;} 8 </style> 9 10 {{ $dir := string (.Get "gallery_dir") }} 11 <ul class="image-gallery"> 12 {{- range page.Resources.Match (printf "%s/*.*" $dir) -}} 13 {{- $imagetitle := index (split .Name ".") 0 -}} 14 <li onclick="embiggen(event)" > 15 <a href="{{ (.Fit "1600x1600 q50").Permalink }}" title="{{ $imagetitle }}" class="lightbox-image"> 16 <img src="{{ (.Fill "300x300 q50").Permalink }}" alt="{{ $imagetitle }}" title="{{ $imagetitle }}"> 17 <span>{{ $imagetitle }}</span> 18 </a> 19 </li> 20 {{ end }} 21 <img class="bigpic" src="" title="" > 22 </ul> 23 24 <script> 25 function embiggen (e) { 26 27 e.preventDefault() 28 29 let img = e.target.parentElement 30 let big = e.currentTarget.parentElement.lastElementChild 31 32 if (big.src == img.href) 33 big.src = "" 34 else 35 big.src = img.href 36 37 } 38 </script> 39