71 lines
1.5 KiB
HTML
71 lines
1.5 KiB
HTML
{{ $folder := .Get "folder" }}
|
|
{{ $images := resources.Match (printf "%s/*.{jpg,png}" $folder) }}
|
|
|
|
<div class="container">
|
|
<div class="gallery">
|
|
{{ range $images }}
|
|
<a href="{{ .RelPermalink }}" class="glightbox" class="gallery-item">
|
|
<img src="{{ .RelPermalink }}" alt="{{ .Name | plainify }}" class="img-fluid rounded mb-2" />
|
|
</a>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
/* CSS Columns for Masonry effect */
|
|
.gallery {
|
|
column-count: 3;
|
|
/* Number of columns */
|
|
column-gap: 15px;
|
|
/* Space between columns */
|
|
}
|
|
|
|
.gallery-item {
|
|
display: inline-block;
|
|
width: 100%;
|
|
break-inside: avoid;
|
|
/* Prevents items from breaking across columns */
|
|
}
|
|
|
|
.gallery img {
|
|
width: 100%;
|
|
height: auto;
|
|
transition: transform 0.3s ease;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.gallery img:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 992px) {
|
|
.gallery {
|
|
column-count: 3;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.gallery {
|
|
column-count: 2;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.gallery {
|
|
column-count: 1;
|
|
}
|
|
}
|
|
|
|
.glightbox-open {
|
|
height: auto;
|
|
}
|
|
</style>
|
|
|
|
<!-- Initialize GLightbox -->
|
|
<script>
|
|
const lightbox = GLightbox({
|
|
selector: '.glightbox',
|
|
scrollLock: false // Prevents GLightbox from locking the scroll
|
|
});
|
|
</script> |