mycosystems/gallowelds.com
4
0
Fork 0
Code Issues 1 Pull requests Activity Actions

update

Browse source
This commit is contained in:
brooke 2024-07-06 17:48:22 -04:00
parent 685fce401b
commit 0d3c08d98f
3 changed files with 31 additions and 166 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
content/catalog/index.md
View file

@ -50,7 +50,15 @@
"deliveryPickup": "",
"installBreakdown": "$200",
"purchaseCost": "",
"cat": "Arches"
"cat": "Arches",
"gallery": [
{
"image": "/img/catalog/12ftRoundArch.jpg.webp"
},
{
"image": "/img/catalog/12ftRoundArch2.jpg.webp"
}
]
},
{
"item": "16ft Table Canopy",

185
themes/gallo/layouts/partials/rental-catalog.html
View file

@ -23,7 +23,7 @@
/>
<label
for="radio-button-{{ .cat }}"
class="noselect text-xs p-1 sm:p-0 font-medium text-gray-900"
class="noselect text-xs sm:p-0 font-medium text-gray-900"
>{{ .cat }}</label
>
</div>
@ -36,6 +36,7 @@
{{ range .Params.catalog }} {{ if ne .item "" }}
<div class="flex flex-col bg-white rounded-lg border p-4 relative">
<img
loading="lazy"
src="https://placehold.co/300x200/"
alt="Placeholder Image"
class="w-full h-48 rounded-md object-cover"
@ -140,150 +141,32 @@
<strong>{{ .item }}</strong>
</h3>
{{ if .gallery }}
<section id="gallery" class="w-full justify-center">
<div
class="mt-8 columns-1 gap-2 sm:columns-2 sm:gap-4 [&>div:not(:first-child)]:mt-4"
>
{{ range .gallery }}
<div
class="carousel-wrapper flex relative justify-center items-center"
class="relative hover:scale-105 ease-in-out duration-200 transition-all hover:shadow-2xl"
>
<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="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"
class="rounded-lg w-full"
src="{{ .image }}"
class="thumbnail transition-opacity duration-400 cursor-pointer m-1 h-[5rem] w-auto rounded-md opacity-20"
/>
{{ end }}
<button class="absolute right-2 top-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
class="fill-black w-6 h-6 bg-white p-1 rounded-sm hover:scale-125 ease-in-out duration-100 transition-all"
>
<path
d="M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z"
/>
</svg>
</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>
{{ end }}
<div class="px-1 pt-4 w-full">
<div class="text-gray-800 text-base">
@ -417,30 +300,4 @@
}
}
});
const gallery = document.getElementById("gallery");
const carouselItems = gallery.querySelectorAll("[data-carousel-item]");
const prevButton = gallery.querySelector("[data-carousel-prev]");
const nextButton = gallery.querySelector("[data-carousel-next]");
let currentItemIndex = 0;
function showItem() {
carouselItems.forEach((item, index) => {
item.classList.add("hidden");
if (index === currentItemIndex) {
item.classList.remove("hidden");
}
});
}
function prevItem() {
currentItemIndex =
(currentItemIndex - 1 + carouselItems.length) % carouselItems.length;
showItem();
}
function nextItem() {
currentItemIndex = (currentItemIndex + 1) % carouselItems.length;
showItem();
}
prevButton.addEventListener("click", prevItem);
nextButton.addEventListener("click", nextItem);
showItem();
</script>

2
themes/gallo/static/css/tailwind.min.css vendored
View file

File diff suppressed because one or more lines are too long