49 lines
1.2 KiB
HTML
49 lines
1.2 KiB
HTML
{{/* https://www.geeksforgeeks.org/how-to-make-image-gallery-using-html-css-and-javascript/ */}}
|
|
{{/*
|
|
Add this to your config yaml to serve images from `static/albums``
|
|
|
|
module:
|
|
mounts:
|
|
source: static/albums
|
|
target: assets/albums
|
|
|
|
|
|
*/}}
|
|
|
|
{{ $dir := string .Params.gallery_dir }}
|
|
|
|
<div class="gallery">
|
|
{{ range (readDir (print "/static" $dir)) }}
|
|
{{- $imageurl := printf "%s/%s" $dir .Name -}}
|
|
{{- $image := resources.Get $imageurl -}}
|
|
{{- $imagetitle := index (split .Name ".") 0 -}}
|
|
{{- if eq $image nil -}}
|
|
{{ return }}
|
|
{{- else -}}
|
|
<div class="gallery-item">
|
|
<img src="{{ $image.Permalink }}"
|
|
onclick="openModal('{{ $image.Permalink }}')"
|
|
alt="{{ $imagetitle }}">
|
|
</div>
|
|
{{- end -}}
|
|
{{ end }}
|
|
</div>
|
|
|
|
<!-- Modal for Image Display -->
|
|
<div id="myModal" class="modal">
|
|
<span class="close" onclick="closeModal()">×</span>
|
|
<img class="modal-content" id="modalImage">
|
|
</div>
|
|
|
|
<!-- JavaScript for Modal -->
|
|
<script>
|
|
function openModal(src) {
|
|
document.getElementById("modalImage").src = src;
|
|
document.getElementById("myModal").style.display = "block";
|
|
}
|
|
|
|
function closeModal() {
|
|
document.getElementById("myModal").style.display = "none";
|
|
}
|
|
</script>
|