jeawin-astro 3.0.94 → 3.0.95

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jeawin-astro",
-    "version": "3.0.94",
+    "version": "3.0.95",
     "author": "chaegumi <chaegumi@qq.com>",
     "description": "",
     "license": "MIT",

package/src/components/detail_images.astro

@@ -58,7 +58,13 @@ if(num > 1){
 }
 ---
 
-<custom-detail-images data-nodepics={nodepics} data-video={video} data-view360={view360} data-thumbs_position={thumbs_position}>
+<custom-detail-images 
+  data-nodepics={nodepics} 
+  data-video={video} 
+  data-view360={view360} 
+  data-thumbs_position={thumbs_position} 
+  data-show_thumbs={show_thumbs}
+>
   <div
     x-data={`{
       isVideoPoppedUp:false,
@@ -84,65 +90,63 @@ if(num > 1){
     <div class:list={["flex flex-col", {"lg:flex-row":thumbs_position=='left'}, "gap-4"]}>
       {
         show_thumbs ? (
-          <div class:list={["order-2", "relative", {
-            "flex flex-row items-center md:order-1 md:w-2/12 md:flex md:flex-col":thumbs_position=='left',
-            
-            }, "px-5"]}>
-            <div class="flex justify-center cursor-pointer absolute left-0 top-1/2 thumbSwiper-prev-btn">
-              {thumbs_position == 'left'?<Icon name="fa6-solid:angle-up" class="size-4" /> :<Icon name="fa6-solid:angle-left" class="size-4" />}
-            </div>
-            <swiper-container
-              init="false"
-              class="thumbSwiper grid"
-              watch-slides-progress="true"
-              slides-per-view="5" 
-              free-mode="true" 
-            >
+          <Fragment>
+            <div class:list={["order-2", "relative", {
+              "flex flex-row items-center md:order-1 md:w-2/12 md:flex md:flex-col":thumbs_position=='left',
               
-              {
-                nodepics.map((pic: any, idx: number) => (
-                  <swiper-slide lazy={true} class:list={[
-                      "swiper-slide",
-                      "hidden"
-                    ]}>
-                    <div class="content-wrapper size-full flex items-center justify-center border border-gray-200 cursor-pointer">
-                      <JeawinImage img_html={pic} add_classes="lazyload" />
-                    </div>
-                  </swiper-slide>
-                ))
-              }
-
-              {
-                video && video.poster ? (
-                  <swiper-slide class="swiper-slide">
-                    <div class="content-wrapper size-full flex items-center justify-center border border-gray-200 cursor-pointer">
-                      <Icon name="fa6-solid:file-video" class="size-10" />
-                    </div>
-                      
-                  </swiper-slide>
-                ) : null
-              }
-
-              {
-                view360 ? (
-                  <swiper-slide class="swiper-slide">
-                    <div class="content-wrapper size-full flex items-center justify-center border border-gray-200 cursor-pointer">
-                      <img src={view360img.src} alt="360° viewer"  />
-                    </div>
-                      
-                  </swiper-slide>
-                ) : null
-              }
-              
-            </swiper-container>
-            <div class="flex justify-center cursor-pointer absolute right-0 top-1/2 thumbSwiper-next-btn">
-              {thumbs_position =='left'?<Icon name="fa6-solid:angle-down" class="size-4" />:<Icon name="fa6-solid:angle-right" class="size-4" />}
-            </div>
-          </div>          
-        ) : null
-      }
+              }, "px-5"]}>
+              <div class="flex justify-center cursor-pointer absolute left-0 top-1/2 thumbSwiper-prev-btn">
+                {thumbs_position == 'left'?<Icon name="fa6-solid:angle-up" class="size-4" /> :<Icon name="fa6-solid:angle-left" class="size-4" />}
+              </div>
+              <swiper-container
+                init="false"
+                class="thumbSwiper grid"
+                watch-slides-progress="true"
+                slides-per-view="5" 
+                free-mode="true" 
+              >
+                
+                {
+                  nodepics.map((pic: any, idx: number) => (
+                    <swiper-slide lazy={true} class:list={[
+                        "swiper-slide",
+                        "hidden"
+                      ]}>
+                      <div class="content-wrapper size-full flex items-center justify-center border border-gray-200 cursor-pointer">
+                        <JeawinImage img_html={pic} add_classes="lazyload" />
+                      </div>
+                    </swiper-slide>
+                  ))
+                }
 
-      <div class:list={["order-1", {"lg:order-2":thumbs_position=='left'}, "w-full", {"lg:w-10/12":thumbs_position=='left'}]}>
+                {
+                  video && video.poster ? (
+                    <swiper-slide class="swiper-slide">
+                      <div class="content-wrapper size-full flex items-center justify-center border border-gray-200 cursor-pointer">
+                        <Icon name="fa6-solid:file-video" class="size-10" />
+                      </div>
+                        
+                    </swiper-slide>
+                  ) : null
+                }
+
+                {
+                  view360 ? (
+                    <swiper-slide class="swiper-slide">
+                      <div class="content-wrapper size-full flex items-center justify-center border border-gray-200 cursor-pointer">
+                        <img src={view360img.src} alt="360° viewer"  />
+                      </div>
+                        
+                    </swiper-slide>
+                  ) : null
+                }
+                
+              </swiper-container>
+              <div class="flex justify-center cursor-pointer absolute right-0 top-1/2 thumbSwiper-next-btn">
+                {thumbs_position =='left'?<Icon name="fa6-solid:angle-down" class="size-4" />:<Icon name="fa6-solid:angle-right" class="size-4" />}
+              </div>
+            </div> 
+                  <div class:list={["order-1", {"lg:order-2":thumbs_position=='left'}, "w-full", {"lg:w-10/12":thumbs_position=='left'}]}>
         <!-- main swiper, pass thumbs swiper as CSS selector -->
         <swiper-container
           init="false"
@@ -252,6 +256,18 @@ if(num > 1){
           ) : null
         }
       </div>
+          </Fragment>         
+        ) : (
+          <div class="content-wrapper border border-white p-1 h-full cursor-pointer overflow-hidden flex items-center justify-center relative">
+            <div class="relative magnifier w-full h-full">
+              <JeawinImage img_html={img_change_attrs(nodepics[0], {style:'width:100%;height:100%;'}, {})} add_classes="lazyload w-full h-full" />
+            </div>
+            
+          </div>
+        )
+      }
+
+
     </div>
   </div>
 </custom-detail-images>
@@ -367,7 +383,7 @@ src="/js-cloudimage-360-view/build/js-cloudimage-360-view.min.js" async defer
       if(!this.glass) return;
 
       this.container.style.overflow = 'visible';
-      this.container.style.zIndex = 100000;
+      // this.container.style.zIndex = 100000;
       this.container.removeChild(this.glass);
 
       this.glass = null;
@@ -387,79 +403,21 @@ src="/js-cloudimage-360-view/build/js-cloudimage-360-view.min.js" async defer
 
       const view360 = this.dataset.view360;
 
+      const show_thumbs = this.dataset.show_thumbs;
+      if(show_thumbs == 'true'){
       initSwiper(".mainSwiper", {
-        pagination:{
-          clickable: true
-        }
-      });
-      initSwiper(".thumbSwiper", {
-        direction: this.dataset.thumbs_position=='left' ? "vertical" : 'horizontal',
-        navigation: {
-          prevEl: '.thumbSwiper-prev-btn',
-          nextEl: '.thumbSwiper-next-btn'
-        },
-        breakpoints: {
-          768: {
-            direction: this.dataset.thumbs_position == 'left' ? "vertical" : 'horizontal',
-          },
-        },
-        on:{
-          init: function(swiper: any){
-            // console.log('swiper initialized');
-            const swiperEl: any = document.querySelector(".thumbSwiper");
-            const slides: any[] = swiperEl.querySelectorAll('swiper-slide');
-
-            slides.forEach((slide, idx: number) => {
-              slide.style.display = 'block';
-            });
-            swiper.update();
-
-            const mainSwiperEl: any = document.querySelector('.mainSwiper'); 
-            
-            
-            slides.forEach((slide, idx: number) => {
-              slide.addEventListener('mouseover', _.debounce(function(e: any){
-                // console.log('mouseover', idx);
-                // console.log(mainSwiperEl.swiper);
-                // swiper.slideTo(idx, 1000, false);
-                mainSwiperEl.swiper.slideTo(idx, 1000, false);
-              },300));
-            });
-            
-          }
-        }
-      });
-
-
-      const thisSelf = this;
-
-      thisSelf
-        .querySelector(".mainSwiper")
-        ?.addEventListener("swiperslidechange", (e: any) => {
-          // console.log("slide changed");
-          const [swiper] = e.detail;
-          // console.log(swiper.isEnd);
-
-          this.closeMagnifier();
-
-          if(view360){
-            // @ts-ignore
-            window.CI360.init();            
-          }
-
-        });
-
-
-      document.addEventListener("astro:after-swap", () => {
-        initSwiper(".mainSwiper", {
           pagination:{
             clickable: true
           }
         });
         initSwiper(".thumbSwiper", {
-          direction: "horizontal",
+          direction: this.dataset.thumbs_position=='left' ? "vertical" : 'horizontal',
+          navigation: {
+            prevEl: '.thumbSwiper-prev-btn',
+            nextEl: '.thumbSwiper-next-btn'
+          },
           breakpoints: {
-            1024: {
+            768: {
               direction: this.dataset.thumbs_position == 'left' ? "vertical" : 'horizontal',
             },
           },
@@ -488,21 +446,32 @@ src="/js-cloudimage-360-view/build/js-cloudimage-360-view.min.js" async defer
               
             }
           }
+        });   
+        
+              const thisSelf = this;
+
+      thisSelf
+        .querySelector(".mainSwiper")
+        ?.addEventListener("swiperslidechange", (e: any) => {
+          // console.log("slide changed");
+          const [swiper] = e.detail;
+          // console.log(swiper.isEnd);
+
+          this.closeMagnifier();
+
+          if(view360){
+            // @ts-ignore
+            window.CI360.init();            
+          }
+
         });
-        thisSelf
-          .querySelector(".mainSwiper")
-          ?.addEventListener("swiperslidechange", (e) => {
-            // console.log("slide changed");
+      }else{
+
+      }
+ 
 
-            this.closeMagnifier();
 
-            if(view360){
-              // @ts-ignore
-              window.CI360.init();              
-            }
 
-          });
-      });
     }
   }
 

package/src/components/detail_images_splide.astro

@@ -343,7 +343,7 @@ src="/js-cloudimage-360-view/build/js-cloudimage-360-view.min.js" async defer
       if(!this.glass) return;
 
       this.container.style.overflow = 'visible';
-      this.container.style.zIndex = 100000;
+      // this.container.style.zIndex = 100000;
       this.container.removeChild(this.glass);
 
       this.glass = null;