Fixed and polished animations in CarouselGallery

Nrosa01 · Jun 9, 2023 · 3b63815 · 3b63815
1 parent c1f507c
commit 3b63815
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/src/lib/CarouselGallery.svelte b/src/lib/CarouselGallery.svelte
@@ -5,7 +5,7 @@
 
   export let images;
   let currentIndex;
-  let container;
+  let imageHTML;
 
   let expanded = false;
   let loaded = false;
@@ -22,9 +22,10 @@
     img.src = currentImage.src;
     img.onload = () => {
       loaded = true;
+      flyX *= -1;
       requestAnimationFrame(() => {
-        container.src = currentImage.src;
-        container.alt = currentImage.title;
+        imageHTML.src = currentImage.src;
+        imageHTML.alt = currentImage.title;
       });
     };
   }
@@ -42,7 +43,8 @@
   }
 
   function handleClickInside(event) {
-    if (container && container.contains(event.target)) {
+    // Check if the click was made on the element itself
+    if (event.target === this) {
       closeImage();
     }
   }
@@ -108,7 +110,7 @@
     if (!expanded) return;
 
     currentIndex = findNextIndex(currentIndex, -1);
-    flyX = -40;
+    flyX = 40;
     flyY = 0;
     show(currentIndex);
   }
@@ -117,7 +119,7 @@
     if (!expanded) return;
 
     currentIndex = findNextIndex(currentIndex, 1);
-    flyX = 40;
+    flyX = -40;
     flyY = 0;
     show(currentIndex);
   }
@@ -140,16 +142,19 @@
     {#if !loaded}
       <div
         class="fixed top-0 left-0 right-0 bottom-0 z-5 flex flex-col items-center justify-center text-white animate-pulse select-none"
-        transition:fade>
+        transition:fade="{{ delay: 100 }}">
         <img class="loading-image" alt="loading nahi" />
         <span class="paragraph">Loading...</span>
       </div>
     {:else}
-      <div on:touchstart="{handleTouchStart}" on:touchend="{handleTouchEnd}">
+      <div
+        on:touchstart="{handleTouchStart}"
+        on:touchend="{handleTouchEnd}"
+        class="z-50">
         <button class="close-button-t" on:click="{closeImage}" transition:fade>
         </button>
         <img
-          bind:this="{container}"
+          bind:this="{imageHTML}"
           class="max-w-[90vw] max-h-[90vh] z-50 select-none transition-transform duration-1000"
           loading="lazy"
           src="{currentImage.src}"

diff --git a/src/lib/Image.svelte b/src/lib/Image.svelte
@@ -27,7 +27,7 @@
 {#if enabled}
   <li class="lg:h-[25vh] h-[20vw] flex-grow m-2" in:fade="{{duration: 400}}">
     <img
-      class="max-h-full min-w-full object-cover align-bottom rounded-xl"
+      class="max-h-full min-w-full object-cover align-bottom rounded-xl select-none"
       src="{image.src}"
       alt="{image.title}"
       loading="lazy"