New_Bhouse_Web/resources/bhouse.js

$(".responsive").slick({
  dots: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 3000,
  arrows: false,
});

// 直式輪播圖動態更改高度
function changeHeight() {
  let firstImg = $('.style_house_sec02_slide div:first-child img');
  let firstImgHeight = firstImg.css('height');
  $('.style_house_sec02_slide .vertical-img').css("height", `${firstImgHeight}`)
}
changeHeight();
$(window).resize(function () {
  setTimeout(() => {
    changeHeight();
  }, 100)
});

let imgCount = $(".slide_single_img").length;
let heightImg = [];

window.onload = function() {
  console.log('onload');
  $('.slide_single_img').each(function (i,array) { // jquery.each() 循環讀取所有圖片
    
    let height = $(this).height();
    let width = $(this).width();
    let x = (height / width);
    console.log('height / width = ', x);
    if (x >= 1) {
      if (i===0) {
        return;
      }
      heightImg.push($(this));
      // 預設高度為 0
      $(this).css({
        'height': 0 + 'px',
        "margin": 'auto',
      });
    }

    if (i === imgCount-1) {
      $('#slider-loading').addClass("slider_loading");
      $('.style_house_sec02').css("height", "auto");
      $('.style_house_sec02 .content').css('opacity', '1');
      
    }
  });
  
  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.cssText = `
      //   height: 500px; 
      //   margin: auto;
      // `;
      allSlideImg[nextSlide].classList.add("img-height-vw");
      } else {
        allSlideImg[heightImgIndex[i]].style.height = '0px';
      }
    }
  });
  
  $('.slide_img').each(function () { // jquery.each() 循環讀取所有圖片
    var height = $(this).height();
    var width = $(this).width();
    let x = (height / width);
    if (x > 1) {
      $(this).css({
        'width': 100 + 'px',
        "margin": 'auto',
        "padding": "0px",
      });
    } else {
      $(this).css({
        "margin-top": '30px',
        "padding": "5px",
      });
    }
  });
}
// $('.slide_single_img').each(function (i) { // jquery.each() 循環讀取所有圖片
//   let height = $(this).height();
//   let width = $(this).width();
//   let x = (height / width);
//   console.log('index', i);
//   console.log('height / width = ', x);
//   if (x >= 1) {
//     console.log('長圖',i);
//     if (i===0) {
//       return;
//     }
//     heightImg.push($(this));
//     // 預設高度為 0
//     $(this).css({
//       'height': 0 + 'px',
//       "margin": 'auto',
//     });
//   }
// });

// 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.cssText = `
//       height: 500px; 
//       margin: auto;
//     `;
//     } else {
//       allSlideImg[heightImgIndex[i]].style.height = '0px';
//     }
//   }
// });

// $('.slide_img').each(function () { // jquery.each() 循環讀取所有圖片
//   var height = $(this).height();
//   var width = $(this).width();
//   let x = (height / width);
//   if (x > 1) {
//     $(this).css({
//       'width': 100 + 'px',
//       "margin": 'auto',
//       "padding": "0px",
//     });
//   } else {
//     $(this).css({
//       "margin-top": '30px',
//       "padding": "5px",
//     });
//   }
// });

$('.style_house_sec02 .slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav'
});
$('.style_house_sec02 .slider-nav').slick({
  slidesToShow: 5,
  slidesToScroll: 3,
  asNavFor: '.slider-for',
  dots: false,
  arrows: false,
  // centerMode: true,
  focusOnSelect: true
});

$(document).on("click", ".article__readMore", function (event) {
  $('.bhouseweb_loc_sec02').css('height', 'auto');
  $('.article__readMore').hide();

});

$(document).on("click", ".bhouseweb_loc_type>label", function (event) {
  $(this).siblings().removeClass('select');

  $(this).toggleClass("select");

});

$(".bt_slogan_portfolio").click(function () {
  $(".bt_slogan_portfolio").fadeOut();
});


$(".bt_slogan").click(function () {
  $(".bt_slogan_portfolio").fadeIn();
});

// Navbar Icon
function changeIcon(e) {
  const item = document.querySelector('[data-toggle-class]');
  item.className === "close-btn" ? item.className = "navbar-toggler-icon" : item.className = "close-btn";
}

$('.furniture_design_content .slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav'
});
$('.furniture_design_content .slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  focusOnSelect: true
});

// 外部連結
let fb_link = `https://www.facebook.com/sharer.php?u=${location.href}`;
let collection_icon_fb = document.getElementById('collection_icon_fb');
$("#collection_icon_fb").attr("href",fb_link);

let line_link = `https://social-plugins.line.me/lineit/share?url=${location.href}`;
let collection_icon_line = document.getElementById('collection_icon_line');

$("#collection_icon_line").attr("href",line_link);