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>
|
||||
</h3>
|
||||
{{ if .gallery }}
|
||||
<div id="gallery" class="relative w-full" data-carousel="slide">
|
||||
<div class="relative h-56 overflow-hidden rounded-lg md:h-96">
|
||||
{{ range .gallery }}
|
||||
<div
|
||||
class="hidden duration-700 ease-in-out"
|
||||
data-carousel-item
|
||||
<section id="gallery" class="w-full justify-center">
|
||||
<div
|
||||
class="carousel-wrapper flex relative justify-center items-center"
|
||||
>
|
||||
<button
|
||||
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
|
||||
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"
|
||||
alt=""
|
||||
class="carousel-image h-[15rem] w-auto rounded-md"
|
||||
/>
|
||||
{{ end }}
|
||||
</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 }}
|
||||
</div>
|
||||
<button
|
||||
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"
|
||||
data-carousel-prev
|
||||
>
|
||||
<span
|
||||
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"
|
||||
>
|
||||
<svg
|
||||
class="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 6 10"
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M5 1 1 5l4 4"
|
||||
/>
|
||||
</svg>
|
||||
<span class="sr-only">Previous</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="absolute top-0 end-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none"
|
||||
data-carousel-next
|
||||
>
|
||||
<span
|
||||
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"
|
||||
>
|
||||
<svg
|
||||
class="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 6 10"
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="m1 9 4-4-4-4"
|
||||
/>
|
||||
</svg>
|
||||
<span class="sr-only">Next</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const carousel = document.querySelector(".carousel");
|
||||
const images = Array.from(
|
||||
document.querySelectorAll(".carousel-image")
|
||||
);
|
||||
const thumbnails = Array.from(
|
||||
document.querySelectorAll(".thumbnail")
|
||||
);
|
||||
const thumbnailContainer =
|
||||
document.querySelector(".thumbnails");
|
||||
|
||||
let currentIndex = 0;
|
||||
|
||||
const showImage = (index) => {
|
||||
carousel.dataset.current = index;
|
||||
|
||||
images.forEach((img, i) => {
|
||||
img.style.display = i === index ? "block" : "none";
|
||||
});
|
||||
|
||||
const thumbnail = thumbnails[index];
|
||||
smoothScrollTo(thumbnailContainer, thumbnail);
|
||||
};
|
||||
|
||||
const handleButtonClick = (direction) => () => {
|
||||
currentIndex =
|
||||
(currentIndex + direction + images.length) %
|
||||
images.length;
|
||||
showImage(currentIndex);
|
||||
addBorderToThumbnail(currentIndex);
|
||||
};
|
||||
|
||||
const addBorderToThumbnail = (index) => {
|
||||
thumbnails.forEach((thumbnail, i) => {
|
||||
if (i === index) {
|
||||
thumbnail.classList.add("!opacity-90");
|
||||
} else {
|
||||
thumbnail.classList.remove("!opacity-90");
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const smoothScrollTo = (element, targetElement) => {
|
||||
let startTime = null;
|
||||
const duration = 500;
|
||||
|
||||
const scrollStep = (timestamp) => {
|
||||
if (!startTime) startTime = timestamp;
|
||||
const progress = Math.min(
|
||||
(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 }}
|
||||
<div class="px-1 pt-4 w-full">
|
||||
<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