Updated images and fixed slider

Now "next-gen"
philocalyst · Aug 17, 2023 · 186451f · 186451f
1 parent 8cd1e4c
commit 186451f
Show file tree

Hide file tree

Showing 24 changed files with 85 additions and 97 deletions.
diff --git a/Images/Alan-Rickman-Leopolds.jpg b/Images/Alan-Rickman-Leopolds.jpg
diff --git a/Images/Alan-Rickman-Leopolds.webp b/Images/Alan-Rickman-Leopolds.webp
diff --git a/Images/Kimberly-Schlapman-Leopolds.jpg b/Images/Kimberly-Schlapman-Leopolds.jpg
diff --git a/Images/Kimberly-Schlapman-Leopolds.webp b/Images/Kimberly-Schlapman-Leopolds.webp
diff --git a/Images/Leopolds-Logo.png b/Images/Leopolds-Logo.png
diff --git a/Images/Miley-Cyrus-Leopolds.jpg b/Images/Miley-Cyrus-Leopolds.jpg
diff --git a/Images/Miley-Cyrus-Leopolds.webp b/Images/Miley-Cyrus-Leopolds.webp
diff --git a/Images/Mini-Anden-Niki-Taylor-Leopolds.jpg b/Images/Mini-Anden-Niki-Taylor-Leopolds.jpg
diff --git a/Images/Mini-Anden-Niki-Taylor-Leopolds.webp b/Images/Mini-Anden-Niki-Taylor-Leopolds.webp
diff --git a/Images/Patti-LuPone-Leopolds.jpg b/Images/Patti-LuPone-Leopolds.jpg
diff --git a/Images/Patti-LuPone-Leopolds.webp b/Images/Patti-LuPone-Leopolds.webp
diff --git a/Images/Paula-Deen-Leopolds.jpg b/Images/Paula-Deen-Leopolds.jpg
diff --git a/Images/Paula-Deen-Leopolds.webp b/Images/Paula-Deen-Leopolds.webp
diff --git a/Images/Philip-Hoffman-Leopolds.jpg b/Images/Philip-Hoffman-Leopolds.jpg
diff --git a/Images/Philip-Hoffman-Leopolds.webp b/Images/Philip-Hoffman-Leopolds.webp
diff --git a/Images/Shipping-Image.jpg b/Images/Shipping-Image.jpg
diff --git a/Images/Shipping-Image.webp b/Images/Shipping-Image.webp
diff --git a/Images/Tom-Cruise-Leopolds.jpg b/Images/Tom-Cruise-Leopolds.jpg
diff --git a/Images/Tom-Cruise-Leopolds.webp b/Images/Tom-Cruise-Leopolds.webp
diff --git a/Images/William-Macy-Leopolds.webp b/Images/William-Macy-Leopolds.webp
diff --git a/Images/William-Macy_Leopolds.jpg b/Images/William-Macy_Leopolds.jpg
diff --git a/index.html b/index.html
@@ -65,19 +65,56 @@ <h1>About Us</h1>
     <div class="wrapper">
         <h1>Famously Good!</h1>
         <div id="image-track" data-mouse-down-at="0" data-prev-percentage="0">
-            <img class="image" src="Images/Miley-Cyrus-Leopolds.jpg" draggable="false" />
-            <img class="image" src="Images/Tom-Cruise-Leopolds.jpg" draggable="false" />
-            <img class="image" src="Images/William-Macy_Leopolds.jpg" draggable="false" />
-            <img class="image" src="Images/Paula-Deen-Leopolds.jpg" draggable="false" />
-            <img class="image" src="Images/Mini-Anden-Niki-Taylor-Leopolds.jpg" draggable="false" />
-            <img class="image" src="Images/Alan-Rickman-Leopolds.jpg" draggable="false" />
-            <img class="image" src="Images/Kimberly-Schlapman-Leopolds.jpg" draggable="false" />
-            <img class="image" src="Images/Patti-LuPone-Leopolds.jpg" draggable="false" />
-            <img class="image" src="Images/Philip-Hoffman-Leopolds.jpg" draggable="false" />
+
+            <div class="imageContainer">
+                <img class="image" src="Images/Miley-Cyrus-Leopolds.webp" draggable="false" />
+                <h2>Miley Cyrus</h2>
+            </div>
+
+            <div class="imageContainer">
+                <img class="image" src="Images/Tom-Cruise-Leopolds.webp" draggable="false" />
+                <h2>Tom Cruise</h2>
+            </div>
+
+            <div class="imageContainer">
+                <img class="image" src="Images/William-Macy-Leopolds.webp" draggable="false" />
+                <h2>William Macy</h2>
+            </div>
+
+            <div class="imageContainer">
+                <img class="image" src="Images/Paula-Deen-Leopolds.webp" draggable="false" />
+                <h2>Paula Deen</h2>
+            </div>
+
+            <div class="imageContainer">
+                <img class="image" src="Images/Mini-Anden-Niki-Taylor-Leopolds.webp" draggable="false" />
+                <h2 style="top:89%">Mini Anden & Niki Taylor</h2>
+            </div>
+
+            <div class="imageContainer">
+                <img class="image" src="Images/Alan-Rickman-Leopolds.webp" draggable="false" />
+                <h2>Alan Rickman</h2>
+            </div>
+
+            <div class="imageContainer">
+                <img class="image" src="Images/Kimberly-Schlapman-Leopolds.webp" draggable="false" />
+                <h2 style="top:89%">Kimberly Schlapman</h2>
+            </div>
+
+            <div class="imageContainer">
+                <img class="image" src="Images/Patti-LuPone-Leopolds.webp" draggable="false" />
+                <h2>Patti LuPone</h2>
+            </div>
+
+            <div class="imageContainer">
+                <img class="image" src="Images/Philip-Hoffman-Leopolds.webp" draggable="false" />
+                <h2>Philip Hoffman</h2>
+            </div>
+
         </div>
     </div>
     <div class="shipping">
-        <img src="Images/Shipping-Image.jpg">
+        <img src="Images/Shipping-Image.webp">
          <h1>Now Shipping</h1>       
     </div>
     <div class="signUp">

diff --git a/style.css b/style.css
@@ -367,36 +367,63 @@ h1, h2, h3, h4, h5, h6 {
   background-color: white;
   margin-bottom: -5px;
   overflow: hidden;
+  position: relative;
   border: 1px solid #bfb398;
   display: inline-block;
+  margin-bottom: -3vh;
+
 }
 
 .wrapper h1 {
     color: #9D000D;
 }
 
+.imageContainer {
+    position: relative;
+}
+
+.imageContainer h2 {
+    margin: 0;
+    position: absolute;
+    top: 95%;
+    left: 50%;
+    transform: translate(-50%, 50%);
+    width: 50vw;
+}
+
 #image-track {
   display: flex;
   gap: 4vmin;
-  position: relative;
-  top: 32%;
-  left: 30%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
   transform: translate(0%, -50%); 
   user-select: none; /* -- Prevent image highlighting -- */
 }
 
 
-#image-track > .image {
+#image-track .image {
   border-radius: 5px;
-  width: 40vmin;
-  height: 56vmin;
+  width: 50vw;
+  height: 29vh;
   object-fit: cover;
   object-position: 100% center;
 }
 
 
 @media (max-width: 490px) {
-    #butterPecan {
-        margin-left: 12.5vw;
-    }
+#butterPecan {
+    margin-left: 12.5vw;
+}
+
+.wrapper {
+    height: 46vh;
+}
+}
+
+
+@media (max-width: 400px) {
+.wrapper {
+    height: 57vh;
+}
 }
diff --git a/track.js b/track.js
@@ -13,7 +13,7 @@ const handleOnUp = () => {
 const handleOnMove = e => {
   if (track.dataset.mouseDownAt === "0") return;
   const mouseDelta = parseFloat(track.dataset.mouseDownAt) - e.clientX;
-  const maxDelta = window.innerWidth / 2;
+  const maxDelta = window.innerWidth * 1.5;
   const percentage = (mouseDelta / maxDelta) * -100;
   const nextPercentageUnconstrained = parseFloat(track.dataset.prevPercentage) + percentage;
   const nextPercentage = Math.max(Math.min(nextPercentageUnconstrained, 0), -100);
@@ -37,80 +37,4 @@ window.ontouchstart = e => handleOnDown(e.touches[0]);
 window.onmouseup = e => handleOnUp(e);
 window.ontouchend = e => handleOnUp(e.touches[0]);
 window.onmousemove = e => handleOnMove(e);
-window.ontouchmove = e => handleOnMove(e.touches[0]);
-
-
-const slider = document.querySelector('.slider');
-const sliderContainer = document.querySelector('.sliderContainer');
-const items = document.querySelectorAll('.item');
-let currentIndex = 0;
-let touchStartX = 0;
-
-// Calculate the total width of all items
-const totalItemsWidth = Array.from(items).reduce((total, item) => {
-    const itemStyle = getComputedStyle(item);
-    const itemWidth = item.offsetWidth + parseFloat(itemStyle.marginLeft) + parseFloat(itemStyle.marginRight);
-    return total + itemWidth;
-  }, 0);
-
-// Set the width of the slider container to accommodate all items
-sliderContainer.style.width = `${totalItemsWidth}px`;
-
-function slideTo(index) {
-const itemStyle = getComputedStyle(items[index]);
-  const itemMarginLeft = parseFloat(itemStyle.marginLeft);
-  const itemMarginRight = parseFloat(itemStyle.marginLeft);
-  let translation;
-  if (index < 0 || index >= items.length) {
-    return;
-  }
-
-  if (index == 1) {
-    translation = index * items[0].offsetWidth + (itemMarginLeft * 1.9);
-  }
-
-  if (index == 2) {
-    translation = index * items[0].offsetWidth + (itemMarginLeft + (itemMarginRight * 3));
-  }
-
-
-
-  console.log(translation + "Margin-left" + itemMarginLeft);
-
-  sliderContainer.style.transform = `translateX(-${translation}px)`;
-  currentIndex = index;
-}
-
-function slideNext() {
-  slideTo(currentIndex + 1);
-}
-
-function slidePrev() {
-  slideTo(currentIndex - 1);
-}
-
-setInterval(slideNext, 4500); // Automatically slide every 3 seconds
-
-slider.addEventListener('touchstart', handleTouchStart);
-slider.addEventListener('touchmove', handleTouchMove);
-slider.addEventListener('touchend', handleTouchEnd);
-
-function handleTouchStart(event) {
-  touchStartX = event.touches[0].clientX;
-}
-
-function handleTouchMove(event) {
-  event.preventDefault(); // Prevent default scrolling behavior
-  const touchX = event.touches[0].clientX;
-  const touchDiff = touchX - touchStartX;
-
-  if (touchDiff > 50) {
-    slidePrev();
-  } else if (touchDiff < -50) {
-    slideNext();
-  }
-}
-
-function handleTouchEnd() {
-  touchStartX = 0;
-}
+window.ontouchmove = e => handleOnMove(e.touches[0]);