A complete rewrite of the gallery plugin: * Using flexbox * Using lightweight JS for lightbox to avoid anchor links, and allow full rotation * Add slideshow as an additional field * Make many more things configurable * Better support for dirs, allow mixed paths * Translatable captions for many files using metadata files * SCSS instead of CSS Reviewed-on: #1 Co-authored-by: Max Mehl <mail@mehl.mx> Co-committed-by: Max Mehl <mail@mehl.mx>
25 lines
844 B
HTML
25 lines
844 B
HTML
{{- $imgs := .imgs -}}
|
|
{{- $galno := .galno -}}
|
|
<div class="snap-lightbox" id="snap-lightbox-{{ $galno }}">
|
|
{{- range $i, $img := $imgs }}
|
|
<div class="snap-lightbox-inner">
|
|
<div class="snap-numbertext">{{ add $i 1 }} / {{ len $imgs }}</div>
|
|
<img
|
|
src="{{ relURL $img.src }}"
|
|
{{ range $attr, $value := $img.html -}}
|
|
{{ safeHTMLAttr $attr }}={{ $value }}
|
|
{{ end -}}
|
|
/>
|
|
{{- with $img.html.title }}
|
|
<div class="snap-caption">{{ . }}</div>
|
|
{{- end }}
|
|
</div>
|
|
{{- end -}}
|
|
|
|
<!-- Close and Next/previous controls -->
|
|
<span class="snap-close" onclick="closeLightbox({{ $galno }})">×</span>
|
|
|
|
<a class="snap-prev" onclick="moveLightboxItem({{ $galno }}, -1)"><span>❮</span></a>
|
|
<a class="snap-next" onclick="moveLightboxItem({{ $galno }}, 1)"><span>❯</span></a>
|
|
</div>
|