goto.js 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536
  1. $(".popular").hide();
  2. $( ".article__readMore" ).click(function() {
  3. $('.article__contexts').css('height','auto');
  4. $('.article__readMore').hide();
  5. });
  6. $(document).on("click", ".likeSee__state__filter--item", function (event) {
  7. $(".CaseNews").toggle();
  8. $(".popular").toggle();
  9. $(".likeSee__state__filter--item").removeClass('active');
  10. $(this).addClass("active");
  11. });
  12. const urlParams = new URLSearchParams(window.location.search);
  13. let id = urlParams.get('cid');
  14. console.log(id);
  15. function get_data() {
  16. // var desid2=String(desid);
  17. // console.log(desid2);
  18. // $("#version").val(desid);
  19. // $("#version").html(desid);
  20. $.ajax({
  21. method: "GET",
  22. // url: `json/cases-${id}.json`,
  23. url: `json/cases-${id}.json`,
  24. dataType: "json",
  25. })
  26. .done(function (msg) {
  27. console.log(msg);
  28. let designersinfo = "";
  29. let CaseInfo = "";
  30. let CaseTag = "";
  31. let CaseData = "";
  32. let CaseNews = "";
  33. let CasePopular = "";
  34. let CaseDetail = "";
  35. let CasePageTitle = "";
  36. let CaseImgQuantity = "";
  37. for (let i = 0; i < msg.length; i++) {
  38. designersinfo = `
  39. <div class="container container-width-column px-md-0">
  40. <div class="article__wrapper">
  41. <h2 class="h4">${msg[i].Casetitle}</h2>
  42. <div class="d-flex justify-content-between">
  43. <div class="small">${msg[i].CaseTeamName} | 圖片提供:${msg[i].CaseCompany}</div>
  44. <div class="small">${msg[i].CaseDate}| 人氣:${msg[i].CaseViews}</div>
  45. </div>
  46. </div>
  47. </div>`
  48. CaseInfo = `
  49. <div class="row mx-0 justify-content-around align-items-center">
  50. <div class="col-md-3 px-mx-0">
  51. <div class="info__items border-end">
  52. <div>
  53. <div class="info__items__title">風格</div>
  54. <div class="info__items--ellipse">${msg[i].CaseStyle}</div>
  55. </div>
  56. </div>
  57. </div>
  58. <div class="col-md-3 px-mx-0">
  59. <div class="info__items border-end">
  60. <div>
  61. <div class="info__items__title">格局</div>
  62. <div class="info__items--ellipse">${msg[i].CaseHouse}</div>
  63. </div>
  64. </div>
  65. </div>
  66. <div class="col-md-3 px-mx-0">
  67. <div class="info__items border-end">
  68. <div>
  69. <div class="info__items__title">坪數</div>
  70. <div class="info__items--ellipse">${msg[i].CaseSize}</div>
  71. </div>
  72. </div>
  73. </div>
  74. <div class="col-md-3 px-mx-0">
  75. <div class="info__items">
  76. <div>
  77. <div class="info__items__title">預算</div>
  78. <div class="info__items--ellipse">${msg[i].CaseProject}</div>
  79. </div>
  80. </div>
  81. </div>
  82. </div>`
  83. for (let j = 0; j < msg[i].CaseTag.length; j++) {
  84. // console.log(msg[i].CaseTag.length);
  85. // console.log(msg[i].CaseTag[j].Tag);
  86. CaseTag += ' \
  87. <a href="" class="btn btn-outline-custom rounded-0">'+ msg[i].CaseTag[j].Tag + '</a> \
  88. ';
  89. }
  90. CaseData = `
  91. <h4 class="d-none d-md-block">CASE DATA</h4>
  92. <div class="caseData__infoItems">
  93. <div class="caseData__infoItems__list">
  94. <div class="caseData__infoItems__list--lf">居住成員:</div>
  95. <div class="caseData__infoItems__list--rt">${msg[i].CaseDataMember} </div>
  96. </div>
  97. <div class="caseData__infoItems__list">
  98. <div class="caseData__infoItems__list--lf">房屋坪數:</div>
  99. <div class="caseData__infoItems__list--rt">${msg[i].CaseDataSize}</div>
  100. </div>
  101. <div class="caseData__infoItems__list">
  102. <div class="caseData__infoItems__list--lf">設計風格:</div>
  103. <div class="caseData__infoItems__list--rt">${msg[i].CaseDataStyle}</div>
  104. </div>
  105. <div class="caseData__infoItems__list">
  106. <div class="caseData__infoItems__list--lf">房屋類型:</div>
  107. <div class="caseData__infoItems__list--rt">${msg[i].CaseDataType}</div>
  108. </div>
  109. <div class="caseData__infoItems__list">
  110. <div class="caseData__infoItems__list--lf">房屋狀況:</div>
  111. <div class="caseData__infoItems__list--rt">${msg[i].CaseDataSituation}</div>
  112. </div>
  113. <div class="caseData__infoItems__list">
  114. <div class="caseData__infoItems__list--lf">圖片提供:</div>
  115. <div class="caseData__infoItems__list--rt">${msg[i].CaseDataImgProvide}</div>
  116. </div>
  117. <div class="caseData__infoItems__list">
  118. <div class="caseData__infoItems__list--lf">空間格局:</div>
  119. <div class="caseData__infoItems__list--rt">${msg[i].CaseDataSpace}</div>
  120. </div>
  121. <div class="caseData__infoItems__list">
  122. <div class="caseData__infoItems__list--lf">主要建材:</div>
  123. <div class="caseData__infoItems__list--rt">${msg[i].CaseDataMaterial}</div>
  124. </div>
  125. </div> `
  126. CaseData2 = `
  127. <div class="caseData__designerBlock h-100">
  128. <div class="caseData__designerBlock__designer d-block d-md-none">
  129. <h4>聯絡設計師</h4>
  130. <ul>
  131. <li><a itemprop="item" href="/designer-index.php?designer_id=779"
  132. target="_blank">${msg[i].CaseCompany}</a></li>
  133. <li><a itemprop="item" href="/designer-index.php?designer_id=779"
  134. target="_blank">${msg[i].CaseTeamName} 設計師</a></li>
  135. <li>免付費諮詢專線</li>
  136. <li><a href="tel:${msg[i].ContactFreeTel}" class="tel">${msg[i].ContactFreeTel}</a></li>
  137. </ul>
  138. </div>
  139. <div class="caseData__designerBlock__designer--pc d-none d-md-block">
  140. <div class="caseData__designerBlock__designer--above">
  141. <h4>聯絡設計師</h4>
  142. <ul>
  143. <li><a href="" target="_blank">${msg[i].CaseCompany}</a></li>
  144. <li><a href="" target="_blank">${msg[i].CaseTeamName} 設計師</a></li>
  145. </ul>
  146. </div>
  147. <div class="caseData__designerBlock__designer--below">
  148. <ul>
  149. <li>
  150. 免付費諮詢專線
  151. </li>
  152. <li>
  153. <a href="tel:${msg[i].ContactFreeTel}" class="tel">${msg[i].ContactFreeTel}</a>
  154. </li>
  155. </ul>
  156. </div>
  157. </div>
  158. <div class="caseData__designerBlock__avatar">
  159. <a href="">
  160. <div class="caseData__designerBlock__avatar--img"
  161. style="background-image:url(${msg[i].ContactDesignerImg});">
  162. </div>
  163. </a>
  164. </div>
  165. </div>`
  166. for (var k = 0; k < msg[i].ProfileRecently.length; k++) {
  167. CaseNews +=
  168. '\<div class="col-md-4 ps-0"\
  169. <div class="vue-waterfall-slot">\
  170. <div class="card CaseNews-Card">\
  171. <a href="'+ msg[i].ProfileRecently[k].ProfileLink + '">\
  172. <img class="img-fluid"\
  173. src="'+ msg[i].ProfileRecently[k].ProfileImg + '"\
  174. alt="幸福空間個案圖" class="card-img-top">\
  175. </a>\
  176. </div>'
  177. CaseNews += '<div class="card-body">'
  178. for (var z = 0; z < msg[i].ProfileRecently[k].ProfileTag.length; z++) {
  179. // console.log(msg[i].ProfileRecently[k].ProfileTag.length)
  180. CaseNews += '\
  181. <a href="">\
  182. '+ msg[i].ProfileRecently[k].ProfileTag[z].Tag + '\
  183. </a>\
  184. ';
  185. }
  186. CaseNews += '</div></div></div></div>'
  187. };
  188. for (var x = 0; x < msg[i].ProfilePopularity.length; x++) {
  189. CasePopular +=
  190. '<div class="likeSee__rule"\
  191. <a href="'+ msg[i].ProfilePopularity[x].ProfileLink + '">\
  192. <div class="likeSee__bgImg">\
  193. <img class="img-fluid" src="'+ msg[i].ProfilePopularity[x].ProfileImg + '" alt="幸福空間個案圖" class="card-img-top">\
  194. </div>\
  195. </a>'
  196. CasePopular += '<div class="likeSee__tag">'
  197. for (var y = 0; y < msg[i].ProfilePopularity[x].ProfileTag.length; y++) {
  198. // console.log(msg[i].ProfileRecently[k].ProfileTag.length)
  199. CasePopular += '\
  200. <a href="'+ msg[i].ProfilePopularity[x].ProfileTag[y].TagLink + '" class="likeSee__tag--item">\
  201. '+ msg[i].ProfilePopularity[x].ProfileTag[y].Tag + '\
  202. </a>\
  203. ';
  204. }
  205. CasePopular += '</div></div>'
  206. };
  207. // 個案細節
  208. CaseDetail += '<div class="row px-0 mx-0">'
  209. CaseDetail += '<div class="col-md-8 case-slick-box" style="overflow-y: hidden;"><div class="img-wrapper-desktopp"><div class="CaseDetail-slick">'
  210. // 輪播圖
  211. for (let j = 0; j < msg[i].CaseDetail.length; j++) {
  212. CaseDetail +=
  213. '<div style="width: 960px;" class="CaseSlider" data-info="'+j+'"><div class="img-wrapper-desktop"><div class="swiper-zoom-container-desktop"><img src="'+ msg[i].CaseDetail[j].CaseDetailImg+ '" alt=""></div></div></div>'
  214. }
  215. CaseDetail += '</div></div></div>'
  216. CaseDetail +=
  217. '<div class="col-md-4" style="background-color:#fff;">\
  218. <div class="modal-header border-0">\
  219. <button type="button" class="btn-close close-window"></button>\
  220. </div>\
  221. <div class="d-flex justify-content-start align-items-center pt-5">\
  222. <a href="">\
  223. <div class="contact-section-avatar me-2">\
  224. <img class="img-fluid" src="'+ msg[i].ContactDesignerImg + '" alt="">\
  225. </div>\
  226. </a>\
  227. <div class="ms-2" style="width: 100%;">\
  228. <a href="" class="contact-section-company">\
  229. <div>\
  230. '+ msg[i].CaseCompany + '\
  231. </div>\
  232. </a>\
  233. <div style="display: flex;" class="contact-section-detail-box mt-3">\
  234. <div class="contact-section-detail-lf">\
  235. <div><i aria-hidden="true" class="fa fa-phone"></i></div>\
  236. </div>\
  237. <div class="contact-section-detail-rt">\
  238. <div><a href="tel:'+ msg[i].ContactFreeTel + '">免付費 ' + msg[i].ContactFreeTel + '</a></div>\
  239. </div>\
  240. </div>\
  241. </div>\
  242. </div>\
  243. '
  244. CaseDetail +=
  245. '<div class="info-area-title-desktop">\
  246. <a href="'+ msg[i].CasePageLink + '" target="_blank">\
  247. '+ msg[i].Casetitle + '\
  248. </a>\
  249. </div>\
  250. <div class="divider"></div>\
  251. '
  252. CaseDetail +=
  253. '<div class="info-area-other-case-desktop py-3">\
  254. <div class="ml-1">該個案的其他圖片(<span id="index" class="slickNumber">1</span>/'+ msg[i].CaseDetail.length + ')</div>\
  255. <div class="other-case-desktop-items d-flex flex-wrap">\
  256. '
  257. for (let j = 0; j < msg[i].CaseDetail.length; j++) {
  258. CaseDetail +=
  259. '<div id="img-0" data-thisid=('+j+') class="w-20 m-1 p-1 img_all CaseOtherImg" style="cursor: pointer;" onclick="slickGoTo('+j+')">\
  260. <img src=" '+ msg[i].CaseDetail[j].CaseDetailImg + '" width="70" height="70" alt="該個案的其他圖片">\
  261. </div>'
  262. };
  263. CaseDetail += '</div></div>';
  264. CaseDetail += '<div class="divider"></div>';
  265. CaseDetail +=
  266. '<div class="info-area-same-case-desktop py-3">\
  267. <div class="ml-1"><span>工業風</span> 其他作品</div>\
  268. <div class="same-case-desktop-items d-flex flex-wrap">\
  269. '
  270. for (let j = 0; j < msg[i].OtherStylePortfolio.length; j++) {
  271. CaseDetail +=
  272. '<div class="w-20 m-1 p-1 ">\
  273. <a href="'+ msg[i].OtherStylePortfolio[j].PortfoliolLink + '">\
  274. <img src="'+ msg[i].OtherStylePortfolio[j].PortfoliolImg + '" width="70" height="70" alt="' + msg[i].OtherStylePortfolio.PortfoliolImgAlt + '">\
  275. </a>\
  276. </div>'
  277. };
  278. CaseDetail += '</div></div>';
  279. CaseDetail += '<div class="divider"></div>';
  280. CaseDetail +=
  281. '<div class="info-area-data-desktop py-3">\
  282. <div class="ml-2">CASE DATA</div>\
  283. <div class="data-table-desktop ml-2">\
  284. <div class="data-table-items d-flex">\
  285. <div class="data-table-lf">\
  286. <div>裝潢費用:</div>\
  287. </div>\
  288. <div class="data-table-rt">\
  289. <div>'+ msg[i].CaseProject + '</div>\
  290. </div>\
  291. </div>\
  292. <div class="data-table-items d-flex">\
  293. <div class="data-table-lf">\
  294. <div>居住成員:</div>\
  295. </div>\
  296. <div class="data-table-rt">\
  297. <div>'+ msg[i].CaseDataMember + '</div>\
  298. </div>\
  299. </div>\
  300. <div class="data-table-items d-flex">\
  301. <div class="data-table-lf">\
  302. <div>設計風格:</div>\
  303. </div>\
  304. <div class="data-table-rt">\
  305. <div>'+ msg[i].CaseStyle + '</div>\
  306. </div>\
  307. </div>\
  308. <div class="data-table-items d-flex">\
  309. <div class="data-table-lf">\
  310. <div>房屋類型:</div>\
  311. </div>\
  312. <div class="data-table-rt">\
  313. <div>'+ msg[i].CaseDataType + '</div>\
  314. </div>\
  315. </div>\
  316. <div class="data-table-items d-flex">\
  317. <div class="data-table-lf">\
  318. <div>房屋坪數:</div>\
  319. </div>\
  320. <div class="data-table-rt">\
  321. <div>'+ msg[i].CaseSize + '</div>\
  322. </div>\
  323. </div>\
  324. <div class="data-table-items d-flex">\
  325. <div class="data-table-lf">\
  326. <div>房屋狀況:</div>\
  327. </div>\
  328. <div class="data-table-rt">\
  329. <div>'+ msg[i].CaseDataSituation + '</div>\
  330. </div>\
  331. </div>\
  332. <div class="data-table-items d-flex">\
  333. <div class="data-table-lf">\
  334. <div>圖片提供:</div>\
  335. </div>\
  336. <div class="data-table-rt">\
  337. <div>'+ msg[i].CaseCompany + '</div>\
  338. </div>\
  339. </div>\
  340. <div class="data-table-items d-flex">\
  341. <div class="data-table-lf">\
  342. <div>空間格局:</div>\
  343. </div>\
  344. <div class="data-table-rt">\
  345. <div>'+ msg[i].CaseDataSpace + '</div>\
  346. </div>\
  347. </div>\
  348. <div class="data-table-items d-flex">\
  349. <div class="data-table-lf">\
  350. <div>主要建材:</div>\
  351. </div>\
  352. <div class="data-table-rt">\
  353. <div>'+ msg[i].CaseDataMaterial + '</div>\
  354. </div>\
  355. </div>\
  356. </div>\
  357. </div>';
  358. CaseDetail += '<div class="divider"></div>';
  359. CaseDetail +=
  360. '<div class="info-area-contact-desktop py-3 mb-2">\
  361. <div class="ml-2">聯絡資訊 Info</div>\
  362. <div class="contact-section-desktop ml-2 mt-2">\
  363. <div class="contact-section-detail-desktop mt-3">\
  364. <div class="d-flex">\
  365. <div class="contact-section-detail-lf">\
  366. <div><i aria-hidden="true" class="fa fa-phone"></i></div>\
  367. </div>\
  368. <div class="contact-section-detail-rt">\
  369. <div>\
  370. <a href="tel:'+ msg[i].CaseCompanyTel + '">' + msg[i].CaseCompanyTel + '</a>\
  371. </div>\
  372. </div>\
  373. </div>\
  374. <div class="d-flex">\
  375. <div class="contact-section-detail-lf">\
  376. <div><i class="fas fa-map-marker-alt"></i></div>\
  377. </div>\
  378. <div class="contact-section-detail-rt">\
  379. <div><a href="'+ msg[i].CaseCompanyMap + '" target="_blank">' + msg[i].CaseCompanyAddress + '</a></div>\
  380. </div>\
  381. </div>\
  382. <div class="d-flex">\
  383. <div class="contact-section-detail-lf">\
  384. <div><i class="far fa-envelope"></i></div>\
  385. </div>\
  386. <div class="contact-section-detail-rt">\
  387. <div><a href="mailto:'+ msg[i].CaseCompanyEmail + '">' + msg[i].CaseCompanyEmail + '</a></div>\
  388. </div>\
  389. </div>\
  390. <div class="d-flex">\
  391. <div class="contact-section-detail-lf">\
  392. <div><i aria-hidden="true" class="fa fa-home"></i></div>\
  393. </div>\
  394. <div class="contact-section-detail-rt">\
  395. <div><a href="'+ msg[i].CaseCompanyWeb + '"\
  396. target="_blank">'+ msg[i].CaseCompanyWeb + '</a></div>\
  397. </div>\
  398. </div>\
  399. </div>\
  400. </div>\
  401. </div>'
  402. CaseDetail += '</div>'
  403. CasePageTitle += '' + msg[i].Casetitle + ''
  404. CaseImgQuantity += '<span class="ms-2 case-img-quantity">' + msg[i].CaseDetail.length + '</span>'
  405. }
  406. $('.article').html(designersinfo);
  407. $('.CaseInfo').html(CaseInfo);
  408. $('.CaseTag').html(CaseTag);
  409. $('.caseData-PC-left').html(CaseData);
  410. $('.caseData-PC-right').html(CaseData2);
  411. $('.CaseNews-Card').html(CaseNews);
  412. $('.Case-popular').html(CasePopular);
  413. $('.CaseModel').html(CaseDetail);
  414. $('#case-page-title').html(CasePageTitle);
  415. $('.case-img-quantity').html(CaseImgQuantity);
  416. $('.CaseDetail-slick').slick({
  417. slidesToShow: 1, //預設 1 幻燈片顯示幾張
  418. slidesToScroll: 1,//預設 1 幻灯片每次滑動幾張
  419. arrows: true, // 預設 true 左右箭頭是否顯示
  420. prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: white; transform: translateY(-10px);"></i></button>',
  421. nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>'
  422. });
  423. var activeimg = $(".slick-active img")[0];
  424. console.log(activeimg);
  425. var imgwidth = activeimg.width;
  426. var imgheight = activeimg.height;
  427. console.log(imgwidth);
  428. // if(imgwidth < 1000 && imgwidth >imgheight)
  429. // {
  430. // console.log(activeimg.parentNode)
  431. // activeimg.parentNode.classList.add('swiper-zoom-container-sm-desktop');
  432. // }
  433. if(imgwidth < imgheight){
  434. activeimg.style.width = 'auto';
  435. }
  436. });
  437. }
  438. get_data();
  439. $('.morePhotoTip > a').attr('href', `./casedetail.html?cid=${id}`);
  440. function slickGoTo(key) {
  441. let slickNumber="";
  442. $('.CaseDetail-slick').slick('slickGoTo', key);
  443. let slickNo=key+1;
  444. console.log(slickNo);
  445. slickNumber+=''+slickNo+''
  446. $('.slickNumber').html(slickNumber);
  447. }
  448. $(document).on("click", ".slick-prev", function (event) {
  449. let slickNumbertest='';
  450. console.log(desid-1);
  451. let slickNumber1=desid+1;
  452. slickNumbertest+=''+slickNumber1+''
  453. $('.slickNumber').html(slickNumbertest);
  454. });
  455. $(document).on("click", ".slick-next", function (event) {
  456. var desid =$(".slick-active").data("info");
  457. let slickNumbertest='';
  458. console.log(desid+1);
  459. let slickNumber1=desid+1;
  460. slickNumbertest+=''+slickNumber1+''
  461. $('.slickNumber').html(slickNumbertest);
  462. });
  463. $(document).on("click", ".close-window", function (event) {
  464. window.close();
  465. });