update gallery, remove unused metadata
This commit is contained in:
parent
4f3e5bf575
commit
685fce401b
3 changed files with 138 additions and 69 deletions
|
|
@ -140,74 +140,150 @@
|
||||||
<strong>{{ .item }}</strong>
|
<strong>{{ .item }}</strong>
|
||||||
</h3>
|
</h3>
|
||||||
{{ if .gallery }}
|
{{ if .gallery }}
|
||||||
<div id="gallery" class="relative w-full" data-carousel="slide">
|
<section id="gallery" class="w-full justify-center">
|
||||||
<div class="relative h-56 overflow-hidden rounded-lg md:h-96">
|
<div
|
||||||
{{ range .gallery }}
|
class="carousel-wrapper flex relative justify-center items-center"
|
||||||
<div
|
>
|
||||||
class="hidden duration-700 ease-in-out"
|
<button
|
||||||
data-carousel-item
|
id="prev"
|
||||||
|
class="absolute left-0 top-1/2 transform -translate-y-1/2 w-1/2 h-full text-white flex items-center justify-start pl-8"
|
||||||
>
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="fill-black w-6 sm:w-4"
|
||||||
|
viewBox="0 0 320 512"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<div class="carousel">
|
||||||
|
{{ range .gallery }}
|
||||||
<img
|
<img
|
||||||
src="{{ .image }}"
|
src="{{ .image }}"
|
||||||
class="absolute block rounded-lg w-full h-auto -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"
|
class="carousel-image h-[15rem] w-auto rounded-md"
|
||||||
alt=""
|
|
||||||
/>
|
/>
|
||||||
|
{{ end }}
|
||||||
</div>
|
</div>
|
||||||
|
<button
|
||||||
|
id="next"
|
||||||
|
class="absolute right-0 top-1/2 transform -translate-y-1/2 w-1/2 h-full text-white flex items-center justify-end pr-8"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="fill-black w-6 sm:w-4"
|
||||||
|
viewBox="0 0 320 512"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="thumbnails flex justify-left mt-2 overflow-x-scroll pb-2"
|
||||||
|
>
|
||||||
|
{{ range .gallery }}
|
||||||
|
<img
|
||||||
|
loading="lazy"
|
||||||
|
src="{{ .image }}"
|
||||||
|
class="thumbnail transition-opacity duration-400 cursor-pointer m-1 h-[5rem] w-auto rounded-md opacity-20"
|
||||||
|
/>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</div>
|
</div>
|
||||||
<button
|
</section>
|
||||||
type="button"
|
|
||||||
class="absolute top-0 start-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none"
|
<script>
|
||||||
data-carousel-prev
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
>
|
const carousel = document.querySelector(".carousel");
|
||||||
<span
|
const images = Array.from(
|
||||||
class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none"
|
document.querySelectorAll(".carousel-image")
|
||||||
>
|
);
|
||||||
<svg
|
const thumbnails = Array.from(
|
||||||
class="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180"
|
document.querySelectorAll(".thumbnail")
|
||||||
aria-hidden="true"
|
);
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
const thumbnailContainer =
|
||||||
fill="none"
|
document.querySelector(".thumbnails");
|
||||||
viewBox="0 0 6 10"
|
|
||||||
>
|
let currentIndex = 0;
|
||||||
<path
|
|
||||||
stroke="currentColor"
|
const showImage = (index) => {
|
||||||
stroke-linecap="round"
|
carousel.dataset.current = index;
|
||||||
stroke-linejoin="round"
|
|
||||||
stroke-width="2"
|
images.forEach((img, i) => {
|
||||||
d="M5 1 1 5l4 4"
|
img.style.display = i === index ? "block" : "none";
|
||||||
/>
|
});
|
||||||
</svg>
|
|
||||||
<span class="sr-only">Previous</span>
|
const thumbnail = thumbnails[index];
|
||||||
</span>
|
smoothScrollTo(thumbnailContainer, thumbnail);
|
||||||
</button>
|
};
|
||||||
<button
|
|
||||||
type="button"
|
const handleButtonClick = (direction) => () => {
|
||||||
class="absolute top-0 end-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none"
|
currentIndex =
|
||||||
data-carousel-next
|
(currentIndex + direction + images.length) %
|
||||||
>
|
images.length;
|
||||||
<span
|
showImage(currentIndex);
|
||||||
class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none"
|
addBorderToThumbnail(currentIndex);
|
||||||
>
|
};
|
||||||
<svg
|
|
||||||
class="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180"
|
const addBorderToThumbnail = (index) => {
|
||||||
aria-hidden="true"
|
thumbnails.forEach((thumbnail, i) => {
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
if (i === index) {
|
||||||
fill="none"
|
thumbnail.classList.add("!opacity-90");
|
||||||
viewBox="0 0 6 10"
|
} else {
|
||||||
>
|
thumbnail.classList.remove("!opacity-90");
|
||||||
<path
|
}
|
||||||
stroke="currentColor"
|
});
|
||||||
stroke-linecap="round"
|
};
|
||||||
stroke-linejoin="round"
|
|
||||||
stroke-width="2"
|
const smoothScrollTo = (element, targetElement) => {
|
||||||
d="m1 9 4-4-4-4"
|
let startTime = null;
|
||||||
/>
|
const duration = 500;
|
||||||
</svg>
|
|
||||||
<span class="sr-only">Next</span>
|
const scrollStep = (timestamp) => {
|
||||||
</span>
|
if (!startTime) startTime = timestamp;
|
||||||
</button>
|
const progress = Math.min(
|
||||||
</div>
|
(timestamp - startTime) / duration,
|
||||||
|
1
|
||||||
|
);
|
||||||
|
|
||||||
|
element.scrollLeft =
|
||||||
|
element.scrollLeft +
|
||||||
|
(targetElement.offsetLeft -
|
||||||
|
element.offsetWidth / 2 +
|
||||||
|
targetElement.offsetWidth / 2 -
|
||||||
|
element.scrollLeft) *
|
||||||
|
0.1 *
|
||||||
|
progress;
|
||||||
|
|
||||||
|
if (progress < 1) {
|
||||||
|
requestAnimationFrame(scrollStep);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
requestAnimationFrame(scrollStep);
|
||||||
|
};
|
||||||
|
|
||||||
|
document
|
||||||
|
.getElementById("prev")
|
||||||
|
.addEventListener("click", handleButtonClick(-1));
|
||||||
|
document
|
||||||
|
.getElementById("next")
|
||||||
|
.addEventListener("click", handleButtonClick(1));
|
||||||
|
|
||||||
|
thumbnails.forEach((thumbnail, index) => {
|
||||||
|
thumbnail.addEventListener("click", () => {
|
||||||
|
currentIndex = index;
|
||||||
|
showImage(index);
|
||||||
|
addBorderToThumbnail(currentIndex);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
showImage(0);
|
||||||
|
addBorderToThumbnail(0);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
<div class="px-1 pt-4 w-full">
|
<div class="px-1 pt-4 w-full">
|
||||||
<div class="text-gray-800 text-base">
|
<div class="text-gray-800 text-base">
|
||||||
|
|
|
||||||
2
themes/gallo/static/css/tailwind.min.css
vendored
2
themes/gallo/static/css/tailwind.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +0,0 @@
|
||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<comment version="3.0">
|
|
||||||
<caption/>
|
|
||||||
<note>Created with GIMP</note>
|
|
||||||
<place/>
|
|
||||||
<categories/>
|
|
||||||
</comment>
|
|
||||||
Loading…
Add table
Reference in a new issue