update

content/catalog/index.md

@@ -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",

themes/gallo/layouts/partials/rental-catalog.html

@@ -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>
+                  {{ end }}
-
+                </div>
-                <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">
@@ -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>