update bhouse.js

content/collection/open_the_blinds_and_meet_the_simple_warmth_of_home/index.md

@@ -89,7 +89,7 @@ collection_slider: [
      {
         "slide_img":"img/0b916b2d9c2141968bea142d9ebf58e5.webp",
         "slide_text":"▲衣櫃依照床的寬度設計，由於直接面向床，設計師特別把吊衣桿的高度做了調整，坐在床上順手就可以方便吊掛；上方的抽屜跟門片，也可以站在床上使用。"
-    },
+    }
 ]
 remark_budget : "<table class='table table-bordered table1'><tbody><tr><th scope='row'>預算說明</th><td><p>成家總預算：111.9萬</p><P>（家具系統櫃：61.2萬；裝修裝潢估價：50.7萬)</P><P>＊裝修裝潢未使用小寶優居安心裝修服務</P><P>＊為提供更精準的預算說明，本案預算依照現時價格調整</P></td></tr></tbody></table>"
 design_space_img : "img/35ab3cdff640422a9f6f865ea8fbb01d.webp"

themes/hugo-universal-theme-master/static/js/bhouse.js

@@ -20,30 +20,52 @@ $(window).resize(function () {
   }, 500)
 });
 
-$('.slide_single_img').each(function () { // jquery.each() 循環讀取所有圖片
-  var height = $(this).height();
-  var width = $(this).width();
-  console.log(height)
-  console.log(width)
-  let x = (height / width)
-  console.log(x)
+let imgCount = $(".slide_single_img").length;
+let heightImg = [];
+
+$('.slide_single_img').each(function (i) { // jquery.each() 循環讀取所有圖片
+  let height = $(this).height();
+  let width = $(this).width();
+  let x = (height / width);
   if (x > 1) {
+    heightImg.push($(this));
+    // 預設高度為 0
     $(this).css({
-      'height': 500 + 'px',
+      'height': 0 + 'px',
       "margin": 'auto',
-
     });
-  } else {
+  }
+});
+
+let heightImgIndex = [];
+
+function getAllIndex(arr) {
+  // 篩選符合條件 Index
+  for (i = 0; i < arr.length; i++) {
+    if (arr[i].height === 0)
+      heightImgIndex.push(i);
+  }
+  return heightImgIndex;
+}
+let allSlideImg = document.querySelectorAll('.slide_single_img');
+getAllIndex(allSlideImg);
+
+// 取得 slick 當前的 Index
+$('.style_house_sec02 .slider').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
+  for (i = 0; i < heightImgIndex.length; i++) {
+    console.log(heightImgIndex[i]);
+    if (nextSlide == heightImgIndex[i]) {
+      allSlideImg[nextSlide].style.height = '500px';
+    } else {
+      allSlideImg[heightImgIndex[i]].style.height = '0px';
+    }
   }
 });
 
 $('.slide_img').each(function () { // jquery.each() 循環讀取所有圖片
   var height = $(this).height();
   var width = $(this).width();
-  console.log(height)
-  console.log(width)
-  let x = (height / width)
-  console.log(x)
+  let x = (height / width);
   if (x > 1) {
     $(this).css({
       'width': 100 + 'px',
@@ -57,6 +79,7 @@ $('.slide_img').each(function () { // jquery.each() 循環讀取所有圖片
     });
   }
 });
+
 $('.style_house_sec02 .slider-for').slick({
   slidesToShow: 1,
   slidesToScroll: 1,
@@ -69,8 +92,12 @@ $('.style_house_sec02 .slider-nav').slick({
   slidesToScroll: 3,
   asNavFor: '.slider-for',
   dots: false,
+<<<<<<< Updated upstream
   arrows: false,
   // centerMode: true,
+=======
+  centerMode: true,
+>>>>>>> Stashed changes
   focusOnSelect: true
 });