$(".popular").hide(); $( ".article__readMore" ).click(function() { $('.article__contexts').css('height','auto'); $('.article__readMore').hide(); }); $(document).on("click", ".likeSee__state__filter--item", function (event) { $(".CaseNews").toggle(); $(".popular").toggle(); $(".likeSee__state__filter--item").removeClass('active'); $(this).addClass("active"); }); const urlParams = new URLSearchParams(window.location.search); let id = urlParams.get('cid'); console.log(id); function get_data() { // var desid2=String(desid); // console.log(desid2); // $("#version").val(desid); // $("#version").html(desid); $.ajax({ method: "GET", // url: `json/cases-${id}.json`, url: `json/cases-${id}.json`, dataType: "json", }) .done(function (msg) { console.log(msg); let designersinfo = ""; let CaseInfo = ""; let CaseTag = ""; let CaseData = ""; let CaseNews = ""; let CasePopular = ""; let CaseDetail = ""; let CasePageTitle = ""; let CaseImgQuantity = ""; for (let i = 0; i < msg.length; i++) { designersinfo = `

${msg[i].Casetitle}

${msg[i].CaseTeamName} | 圖片提供:${msg[i].CaseCompany}
${msg[i].CaseDate}| 人氣:${msg[i].CaseViews}
` CaseInfo = `
風格
${msg[i].CaseStyle}
格局
${msg[i].CaseHouse}
坪數
${msg[i].CaseSize}
預算
${msg[i].CaseProject}
` for (let j = 0; j < msg[i].CaseTag.length; j++) { // console.log(msg[i].CaseTag.length); // console.log(msg[i].CaseTag[j].Tag); CaseTag += ' \ '+ msg[i].CaseTag[j].Tag + ' \ '; } CaseData = `

CASE DATA

居住成員:
${msg[i].CaseDataMember}
房屋坪數:
${msg[i].CaseDataSize}
設計風格:
${msg[i].CaseDataStyle}
房屋類型:
${msg[i].CaseDataType}
房屋狀況:
${msg[i].CaseDataSituation}
圖片提供:
${msg[i].CaseDataImgProvide}
空間格局:
${msg[i].CaseDataSpace}
主要建材:
${msg[i].CaseDataMaterial}
` CaseData2 = `

聯絡設計師

` for (var k = 0; k < msg[i].ProfileRecently.length; k++) { CaseNews += '\
\
\ \ 幸福空間個案圖\ \
' CaseNews += '
' for (var z = 0; z < msg[i].ProfileRecently[k].ProfileTag.length; z++) { // console.log(msg[i].ProfileRecently[k].ProfileTag.length) CaseNews += '\ \ '+ msg[i].ProfileRecently[k].ProfileTag[z].Tag + '\ \ '; } CaseNews += '
' }; for (var x = 0; x < msg[i].ProfilePopularity.length; x++) { CasePopular += '
\
\ 幸福空間個案圖\
\ ' CasePopular += '
' for (var y = 0; y < msg[i].ProfilePopularity[x].ProfileTag.length; y++) { // console.log(msg[i].ProfileRecently[k].ProfileTag.length) CasePopular += '\ \ '+ msg[i].ProfilePopularity[x].ProfileTag[y].Tag + '\ \ '; } CasePopular += '
' }; // 個案細節 CaseDetail += '
' CaseDetail += '
' // 輪播圖 for (let j = 0; j < msg[i].CaseDetail.length; j++) { CaseDetail += '
' } CaseDetail += '
' CaseDetail += '
\ \ \ ' CaseDetail += '\
\ ' CaseDetail += '
\
該個案的其他圖片(1/'+ msg[i].CaseDetail.length + ')
\
\ ' for (let j = 0; j < msg[i].CaseDetail.length; j++) { CaseDetail += '
\ 該個案的其他圖片\
' }; CaseDetail += '
'; CaseDetail += '
'; CaseDetail += '
\
工業風 其他作品
\
\ ' for (let j = 0; j < msg[i].OtherStylePortfolio.length; j++) { CaseDetail += '
\ \ ' + msg[i].OtherStylePortfolio.PortfoliolImgAlt + '\ \
' }; CaseDetail += '
'; CaseDetail += '
'; CaseDetail += '
\
CASE DATA
\
\
\
\
裝潢費用:
\
\
\
'+ msg[i].CaseProject + '
\
\
\
\
\
居住成員:
\
\
\
'+ msg[i].CaseDataMember + '
\
\
\
\
\
設計風格:
\
\
\
'+ msg[i].CaseStyle + '
\
\
\
\
\
房屋類型:
\
\
\
'+ msg[i].CaseDataType + '
\
\
\
\
\
房屋坪數:
\
\
\
'+ msg[i].CaseSize + '
\
\
\
\
\
房屋狀況:
\
\
\
'+ msg[i].CaseDataSituation + '
\
\
\
\
\
圖片提供:
\
\
\
'+ msg[i].CaseCompany + '
\
\
\
\
\
空間格局:
\
\
\
'+ msg[i].CaseDataSpace + '
\
\
\
\
\
主要建材:
\
\
\
'+ msg[i].CaseDataMaterial + '
\
\
\
\
'; CaseDetail += '
'; CaseDetail += '
\
聯絡資訊 Info
\ \
' CaseDetail += '
' CasePageTitle += '' + msg[i].Casetitle + '' CaseImgQuantity += '' + msg[i].CaseDetail.length + '' } $('.article').html(designersinfo); $('.CaseInfo').html(CaseInfo); $('.CaseTag').html(CaseTag); $('.caseData-PC-left').html(CaseData); $('.caseData-PC-right').html(CaseData2); $('.CaseNews-Card').html(CaseNews); $('.Case-popular').html(CasePopular); $('.CaseModel').html(CaseDetail); $('#case-page-title').html(CasePageTitle); $('.case-img-quantity').html(CaseImgQuantity); $('.CaseDetail-slick').slick({ slidesToShow: 1, //預設 1 幻燈片顯示幾張 slidesToScroll: 1,//預設 1 幻灯片每次滑動幾張 arrows: true, // 預設 true 左右箭頭是否顯示 prevArrow: '', nextArrow: '' }); var activeimg = $(".slick-active img")[0]; console.log(activeimg); var imgwidth = activeimg.width; var imgheight = activeimg.height; console.log(imgwidth); // if(imgwidth < 1000 && imgwidth >imgheight) // { // console.log(activeimg.parentNode) // activeimg.parentNode.classList.add('swiper-zoom-container-sm-desktop'); // } if(imgwidth < imgheight){ activeimg.style.width = 'auto'; } }); } get_data(); $('.morePhotoTip > a').attr('href', `./casedetail.html?cid=${id}`); function slickGoTo(key) { let slickNumber=""; $('.CaseDetail-slick').slick('slickGoTo', key); let slickNo=key+1; console.log(slickNo); slickNumber+=''+slickNo+'' $('.slickNumber').html(slickNumber); } $(document).on("click", ".slick-prev", function (event) { let slickNumbertest=''; console.log(desid-1); let slickNumber1=desid+1; slickNumbertest+=''+slickNumber1+'' $('.slickNumber').html(slickNumbertest); }); $(document).on("click", ".slick-next", function (event) { var desid =$(".slick-active").data("info"); let slickNumbertest=''; console.log(desid+1); let slickNumber1=desid+1; slickNumbertest+=''+slickNumber1+'' $('.slickNumber').html(slickNumbertest); }); $(document).on("click", ".close-window", function (event) { window.close(); });