更新建案頁

builder/detail/index.html

@@ -57,6 +57,10 @@
   <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600&display=swap" rel="stylesheet" />
   <!-- Slick -->
   <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
+  <!-- Swiper -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
+  <!-- Lightgallery -->
+  <link href="https://cdn.jsdelivr.net/npm/lightgallery@2.7.0/css/lightgallery-bundle.min.css" rel="stylesheet">
   <!-- CSS -->
   <link rel="stylesheet" href="../../css/reset.css" />
   <link rel="stylesheet" href="../../css/detail.css" />
@@ -103,8 +107,15 @@
     <div class="row w-100 my-4">
       <div class="col-12 mb-4">
         <div class="p-4 shadow">
-          <div class="slider-list">
-            <!-- 輪播 -->
+          <!-- <div class="slider-list" id="lightgallery">
+          </div> -->
+
+          <div class="swiper mySwiper" id="lightgallery">
+            <div class="swiper-wrapper slider-list">
+              <!-- 輪播 -->
+            </div>
+            <div class="swiper-button-next"></div>
+            <div class="swiper-button-prev"></div>
           </div>
         </div>
       </div>
@@ -208,89 +219,9 @@
       <div class="col-12">
         <h5 class="me-5 my-4">推薦建案</h5>
         <!-- 瀑布流排版 Masonry -->
-        <div class="other-list">
-          <div class="container">
+        <div class="other-list mb-5">
+          <div class="container px-0">
             <div class="row" data-masonry='{"percentPosition": true }'>
-              <div class="col-6 col-md-3 mb-3">
-                <div class="card">
-                  <img
-                    src="https://github.com/hexschool/2022-web-layout-training/blob/main/week8-202207/art09.jpg?raw=true"
-                    alt="" class="img-fluid card-img-top">
-                  <div class="card-body">
-                    <h5 class="card-title">區塊戀-他的私生活</h5>
-                  </div>
-                </div>
-              </div>
-              <div class="col-6 col-md-3 mb-3">
-                <div class="card">
-                  <img
-                    src="https://github.com/hexschool/2022-web-layout-training/blob/main/week8-202207/art10.jpg?raw=true"
-                    alt="" class="img-fluid card-img-top">
-                  <div class="card-body">
-                    <h5 class="card-title">夏娃的醜聞</h5>
-                  </div>
-                </div>
-              </div>
-              <div class="col-6 col-md-3 mb-3">
-                <div class="card">
-                  <img
-                    src="https://github.com/hexschool/2022-web-layout-training/blob/main/week8-202207/art02.jpg?raw=true"
-                    alt="" class="img-fluid card-img-top">
-                  <div class="card-body">
-                    <h5 class="card-title">藍色啤酒海</h5>
-                  </div>
-                </div>
-              </div>
-              <div class="col-6 col-md-3 mb-3">
-                <div class="card">
-                  <img
-                    src="https://github.com/hexschool/2022-web-layout-training/blob/main/week8-202207/art11.jpg?raw=true"
-                    alt="" class="img-fluid card-img-top">
-                  <div class="card-body">
-                    <h5 class="card-title">沒有人愛我</h5>
-                  </div>
-                </div>
-              </div>
-              <div class="col-6 col-md-3 mb-3">
-                <div class="card">
-                  <img
-                    src="https://github.com/hexschool/2022-web-layout-training/blob/main/week8-202207/art12.jpg?raw=true"
-                    alt="" class="img-fluid card-img-top">
-                  <div class="card-body">
-                    <h5 class="card-title">不哭不哭眼淚是珍珠</h5>
-                  </div>
-                </div>
-              </div>
-              <div class="col-6 col-md-3 mb-3">
-                <div class="card">
-                  <img
-                    src="https://github.com/hexschool/2022-web-layout-training/blob/main/week8-202207/art03.jpg?raw=true"
-                    alt="" class="img-fluid card-img-top">
-                  <div class="card-body">
-                    <h5 class="card-title">十分鐘就到</h5>
-                  </div>
-                </div>
-              </div>
-              <div class="col-6 col-md-3 mb-3">
-                <div class="card">
-                  <img
-                    src="https://github.com/hexschool/2022-web-layout-training/blob/main/week8-202207/art04.jpg?raw=true"
-                    alt="" class="img-fluid card-img-top">
-                  <div class="card-body">
-                    <h5 class="card-title">我這樣有美嗎</h5>
-                  </div>
-                </div>
-              </div>
-              <div class="col-6 col-md-3 mb-3">
-                <div class="card">
-                  <img
-                    src="https://github.com/hexschool/2022-web-layout-training/blob/main/week8-202207/art27.jpg?raw=true"
-                    alt="" class="img-fluid card-img-top">
-                  <div class="card-body">
-                    <h5 class="card-title">我真的受傷了</h5>
-                  </div>
-                </div>
-              </div>
             </div>
           </div>
         </div>
@@ -298,6 +229,21 @@
     </div>
   </div>
 
+  <!-- 建案影片 Modal -->
+  <div class="modal fade" id="videoModal" tabindex="-1" aria-labelledby="videoModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-body p-0">
+          <iframe id="videoFrame" width="100%" height="300"
+            src="https://www.youtube.com/embed/GQrppVgwz5o?si=pcivgLQnaCSMGlZc" title="YouTube video player"
+            frameborder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+            referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <!-- 動態載入 -->
   <div id="btn-box"></div>
   <div id="footer" class="d-none d-lg-block"></div>
@@ -308,6 +254,8 @@
 
   <!-- Slick -->
   <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
+  <!-- Swiper JS -->
+  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
   <!-- Bootstrap -->
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.1/dist/umd/popper.min.js"
     integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN"
@@ -316,6 +264,10 @@
     integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/"
     crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
+  <!-- Lightgallery -->
+  <script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.0/lightgallery.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.0/plugins/thumbnail/lg-thumbnail.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.0/plugins/zoom/lg-zoom.min.js"></script>
   <!-- Chart -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
   <script src="../../js/lists.js"></script>

builder/detail/js/main.js

@@ -202,26 +202,54 @@ async function getData() {
       $("#website").hide();
     }
 
+    let sliderDom = "";
+
     // 建案影片
     if (data.yt.length) {
-      let dom = "";
+      // let dom = "";
       data.yt.map((item) => {
-        dom += `<img src="${item.imgUrl}" alt="">`;
-      })
+        sliderDom += `
+          <div class="swiper-slide">
+            <button class="video-item" data-yt-id="${item.yt_id}">
+              <img src="${item.imgUrl}" alt="">
+              <img src="../../img/icon/play.svg" class="play-img" alt="play-img">
+            </button>
+          </div>`;
+      });
+
+      $(document).on('click', '.video-item', function () {
+        const videoId = $(this).data('yt-id'); // 取得 data-yt-id
+        const videoUrl = `https://www.youtube.com/embed/${videoId}`; // 影片 url
+        $('#videoFrame').attr('src', videoUrl); // 設置 iframe src
 
-      $(".slider-list").html(dom);
+        $('#videoModal').modal('show');  // 顯示影片彈跳視窗
+      });
+
+      // 當 modal 關閉時清空 iframe src
+      $('#videoModal').on('hidden.bs.modal', function () {
+        $('#videoFrame').attr('src', '');
+      });
     }
 
     // 建案圖片
     if (data.img.length) {
-      let dom = "";
       data.img.map((item) => {
-        dom += `<img src="${item.name}" alt="">`;
-      })
+        sliderDom += `
+         <div class="swiper-slide">
+          <a href="${item.name}" data-src="${item.name}">
+            <img src="${item.name}" alt="">
+          </a>
+          </div>`;
 
-      $(".slider-list").append(dom);
+        // sliderDom += `
+        //   <a href="${item.name}" data-src="${item.name}">
+        //     <img src="${item.name}" alt="">
+        //   </a>`;
+      })
     }
 
+    $(".slider-list").append(sliderDom);
+
     // 標籤
     if (data.tags.length) {
       let dom = "";
@@ -233,18 +261,38 @@ async function getData() {
     }
 
     // 輪播
-    $(".slider-list").slick({
-      dots: false,
-      infinite: true,
-      speed: 500,
-      autoplay: true,
-      autoplaySpeed: 3000,
-      slidesToScroll: 1,
-      arrows: true,
-      prevArrow:
-        '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 36px;color: #D4D4D4;transform: translateY(-10px);"></i></button>',
-      nextArrow:
-        '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 36px;color: #D4D4D4;transform: translateY(-10px);"></i></button>',
+    // $(".slider-list").slick({
+    //   dots: false,
+    //   infinite: false,
+    //   speed: 500,
+    //   autoplay: true,
+    //   autoplaySpeed: 3000,
+    //   slidesToScroll: 1,
+    //   arrows: true,
+    //   draggable: false, // 禁用鼠標拖曳功能
+    //   prevArrow:
+    //     '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 36px;color: #D4D4D4;transform: translateY(-10px);"></i></button>',
+    //   nextArrow:
+    //     '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 36px;color: #D4D4D4;transform: translateY(-10px);"></i></button>',
+    // });
+
+    var swiper = new Swiper(".mySwiper", {
+      navigation: {
+        nextEl: ".swiper-button-next",
+        prevEl: ".swiper-button-prev",
+      },
+    });
+
+    console.log('$("#lightgallery")', $("#lightgallery"));
+    console.log('$("#lightgallery length")', $("#lightgallery").length);
+
+    const container = document.querySelector('.slider-list');
+    console.log('container', container);
+
+    window.lightGallery(container, {
+      selector: 'a', // 對應圖片的 <a> 標籤
+      plugins: [lgZoom, lgThumbnail],
+      preload: 4
     });
 
     // 雷達圖繪製 Chart.js
@@ -323,6 +371,34 @@ async function getData() {
       options: chartRadarOptions
     });
 
+    // 推薦建案
+    let otherBuilder = '<div class="row" data-masonry="{" percentPosition": true }">';
+
+    data.other_builder.map(item => {
+      let dom = `
+                <div class="col-6 col-md-4 mb-3">
+                  <div class="card">
+                    <a href="${item.link}">
+                      <img src="../../img/icon/play.svg" class="play-img${item.is_video === '0' ? ' d-none' : ''}" alt="play-img">
+                        <img src="${item.img}" alt="" class="img-fluid card-img-top">
+                          <div class="card-body">
+                            <h5 class="card-title">${item.title}</h5>
+                          </div>
+                        </a>
+                      </div>
+                  </div>
+                  `;
+      otherBuilder += dom;
+    });
+
+    otherBuilder += "</div>";
+    $(".other-list .container").html(otherBuilder);
+
+    // 確保圖片都載入完成，避免造成剛進入頁面時圖片被覆蓋
+    $('.other-list .row').imagesLoaded().progress(function () {
+      $('.other-list .row').masonry(); // 渲染整體畫面
+    });
+
     console.log('getData', data);
   } catch (error) {
     console.log("error", error);
@@ -335,9 +411,4 @@ getData();
 $(".article-read-more").on("click", () => {
   $(".article-content").css("height", "100%");
   $(".article-read-more").hide();
-});
-
-// 確保圖片都載入完成，避免造成剛進入頁面時圖片被覆蓋
-$('.other-list .row').imagesLoaded().progress(function () {
-  $('.other-list .row').masonry(); // 渲染整體畫面
 });

css/detail.css

@@ -108,16 +108,24 @@
   display: flex;
   align-items: center;
 }
-.detail-content .slider-list {
-  padding: 0 3rem;
-}
 .detail-content .slider-list img {
   width: 100%;
   height: 650px;
+  padding: 0 3rem;
   -o-object-fit: cover;
      object-fit: cover;
   cursor: pointer;
 }
+.detail-content .slider-list .video-item {
+  position: relative;
+  border: none;
+  background: transparent;
+}
+.detail-content .slider-list .video-item .play-img {
+  width: 110px;
+  height: 110px;
+  padding: 0;
+}
 .detail-content .slider-list .slick-next,
 .detail-content .slider-list .slick-prev {
   position: absolute;
@@ -131,6 +139,21 @@
 .detail-content .slider-list .slick-prev {
   left: 0;
 }
+.detail-content .swiper-button-prev::after,
+.detail-content .swiper-button-next::after {
+  content: "";
+  width: 25px;
+  height: 40px;
+  background-position: center;
+  background-repeat: no-repeat;
+  display: inline-block;
+}
+.detail-content .swiper-button-next::after {
+  background-image: url("https://hhh.com.tw/assets/images/rv_web/arrow-right.png");
+}
+.detail-content .swiper-button-prev:after {
+  background-image: url("https://hhh.com.tw/assets/images/rv_web/arrow-left.png");
+}
 .detail-content .media-list {
   margin: auto;
   padding: 1rem 3rem;
@@ -157,6 +180,20 @@
   color: #EE751B;
   border: 1px solid #EE751B;
 }
+.detail-content .other-list h5 {
+  margin-bottom: 0;
+  font-size: 1.125rem;
+  color: #727679;
+  letter-spacing: 1px;
+}
+
+.play-img {
+  width: 50px;
+  position: absolute;
+  top: 45%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
 
 .breadcrumb-item.active span {
   opacity: 0.7;

css/detail.css.map

@@ -1 +1 @@
-{"version":3,"sources":["detail.scss","detail.css"],"names":[],"mappings":"AAEI;EACE,cAAA;ACDN;ADKE;EACE,cAAA;EACA,iBAAA;EACA,gBAAA;ACHJ;ADME;EACE,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,aAAA;EACA,cAAA;ACJJ;ADMI;EACE,cAAA;EACA,iBAAA;EACA,gBAAA;EACA,mBAAA;ACJN;ADQM;EACE,cAAA;EACA,mBAAA;ACNR;ADSM;EACE,cAAA;EACA,iBAAA;EACA,iBAAA;ACPR;ADWI;EACE,qBAAA;EACA,0BAAA;EACA,iBAAA;EACA,iBAAA;EACA,cAAA;ACTN;ADaM;EACE,mBAAA;ACXR;ADaQ;EACE,gBAAA;ACXV;ADkBE;EACE,kBAAA;AChBJ;ADkBI;EACE,qBAAA;EACA,oBAAA;EACA,kBAAA;EACA,yBAAA;EACA,sBAAA;EACA,mBAAA;EACA,WAAA;EACA,gBAAA;EACA,oBAAA;AChBN;ADkBM;EACE,YAAA;AChBR;ADmBM;EACE,kBAAA;EACA,iBAAA;ACjBR;ADmBQ;EACE,cAAA;EACA,kBAAA;EACA,kBAAA;EACA,mBAAA;ACjBV;ADuBE;EACE,YAAA;EACA,gBAAA;EACA,mBAAA;EACA,gBAAA;EACA,cAAA;EACA,oBAAA;EACA,qBAAA;ACrBJ;ADwBE;EACE,aAAA;EACA,uBAAA;EACA,cAAA;EACA,4BAAA;EACA,oBAAA;EACA,eAAA;ACtBJ;ADwBI;EACE,cAAA;ACtBN;ADyBI;EACE,qBAAA;EACA,sBAAA;EACA,mBAAA;EACA,mBAAA;ACvBN;AD0BI;EACE,WAAA;EACA,qBAAA;EACA,kBAAA;EAEA,iFAAA;EACA,WAAA;EACA,YAAA;EAEA,iCAAA;ACxBN;AD4BE;EACE,iBAAA;EACA,aAAA;EACA,mBAAA;AC1BJ;AD6BE;EACE,eAAA;AC3BJ;AD6BI;EACE,WAAA;EACA,aAAA;EACA,oBAAA;KAAA,iBAAA;EACA,eAAA;AC3BN;AD8BI;;EAEE,kBAAA;EACA,QAAA;EACA,YAAA;EACA,uBAAA;AC5BN;AD+BI;EACE,QAAA;AC7BN;ADgCI;EACE,OAAA;AC9BN;ADkCE;EACE,YAAA;EACA,kBAAA;EACA,gBAAA;EACA,aAAA;EACA,6BAAA;EACA,sBAAA;EACA,8BAAA;EACA,mBAAA;AChCJ;ADkCI;EACE,qBAAA;EACA,gBAAA;AChCN;ADqCI;EACE,qBAAA;EACA,cAAA;EACA,sBAAA;EACA,cAAA;EACA,yBAAA;EACA,oBAAA;ACnCN;ADqCM;EACE,cAAA;EACA,yBAAA;ACnCR;;AD0CE;EACE,YAAA;ACvCJ","file":"detail.css"}
+{"version":3,"sources":["detail.scss","detail.css"],"names":[],"mappings":"AAEI;EACE,cAAA;ACDN;ADKE;EACE,cAAA;EACA,iBAAA;EACA,gBAAA;ACHJ;ADME;EACE,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,aAAA;EACA,cAAA;ACJJ;ADMI;EACE,cAAA;EACA,iBAAA;EACA,gBAAA;EACA,mBAAA;ACJN;ADQM;EACE,cAAA;EACA,mBAAA;ACNR;ADSM;EACE,cAAA;EACA,iBAAA;EACA,iBAAA;ACPR;ADWI;EACE,qBAAA;EACA,0BAAA;EACA,iBAAA;EACA,iBAAA;EACA,cAAA;ACTN;ADaM;EACE,mBAAA;ACXR;ADaQ;EACE,gBAAA;ACXV;ADkBE;EACE,kBAAA;AChBJ;ADkBI;EACE,qBAAA;EACA,oBAAA;EACA,kBAAA;EACA,yBAAA;EACA,sBAAA;EACA,mBAAA;EACA,WAAA;EACA,gBAAA;EACA,oBAAA;AChBN;ADkBM;EACE,YAAA;AChBR;ADmBM;EACE,kBAAA;EACA,iBAAA;ACjBR;ADmBQ;EACE,cAAA;EACA,kBAAA;EACA,kBAAA;EACA,mBAAA;ACjBV;ADuBE;EACE,YAAA;EACA,gBAAA;EACA,mBAAA;EACA,gBAAA;EACA,cAAA;EACA,oBAAA;EACA,qBAAA;ACrBJ;ADwBE;EACE,aAAA;EACA,uBAAA;EACA,cAAA;EACA,4BAAA;EACA,oBAAA;EACA,eAAA;ACtBJ;ADwBI;EACE,cAAA;ACtBN;ADyBI;EACE,qBAAA;EACA,sBAAA;EACA,mBAAA;EACA,mBAAA;ACvBN;AD0BI;EACE,WAAA;EACA,qBAAA;EACA,kBAAA;EAEA,iFAAA;EACA,WAAA;EACA,YAAA;EAEA,iCAAA;ACxBN;AD4BE;EACE,iBAAA;EACA,aAAA;EACA,mBAAA;AC1BJ;AD8BI;EACE,WAAA;EACA,aAAA;EACA,eAAA;EACA,oBAAA;KAAA,iBAAA;EACA,eAAA;AC5BN;AD+BI;EACE,kBAAA;EACA,YAAA;EACA,uBAAA;AC7BN;AD+BM;EACE,YAAA;EACA,aAAA;EACA,UAAA;AC7BR;ADiCI;;EAEE,kBAAA;EACA,QAAA;EACA,YAAA;EACA,uBAAA;AC/BN;ADkCI;EACE,QAAA;AChCN;ADmCI;EACE,OAAA;ACjCN;ADqCE;;EAEE,WAAA;EACA,WAAA;EACA,YAAA;EACA,2BAAA;EACA,4BAAA;EACA,qBAAA;ACnCJ;ADsCE;EACE,gFAAA;ACpCJ;ADuCE;EACE,+EAAA;ACrCJ;ADwCE;EACE,YAAA;EACA,kBAAA;EACA,gBAAA;EACA,aAAA;EACA,6BAAA;EACA,sBAAA;EACA,8BAAA;EACA,mBAAA;ACtCJ;ADwCI;EACE,qBAAA;EACA,gBAAA;ACtCN;AD2CI;EACE,qBAAA;EACA,cAAA;EACA,sBAAA;EACA,cAAA;EACA,yBAAA;EACA,oBAAA;ACzCN;AD2CM;EACE,cAAA;EACA,yBAAA;ACzCR;AD+CI;EACE,gBAAA;EACA,mBAAA;EACA,cAAA;EACA,mBAAA;AC7CN;;ADkDA;EACE,WAAA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,gCAAA;AC/CF;;ADmDE;EACE,YAAA;AChDJ","file":"detail.css"}

css/detail.scss

@@ -139,15 +139,26 @@
   }
 
   .slider-list {
-    padding: 0 3rem;
-
     img {
       width: 100%;
       height: 650px;
+      padding: 0 3rem;
       object-fit: cover;
       cursor: pointer;
     }
 
+    .video-item {
+      position: relative;
+      border: none;
+      background: transparent;
+
+      .play-img {
+        width: 110px;
+        height: 110px;
+        padding: 0;
+      }
+    }
+
     .slick-next,
     .slick-prev {
       position: absolute;
@@ -165,6 +176,24 @@
     }
   }
 
+  .swiper-button-prev::after,
+  .swiper-button-next::after {
+    content: '';
+    width: 25px;
+    height: 40px;
+    background-position: center;
+    background-repeat: no-repeat;
+    display: inline-block;
+  }
+
+  .swiper-button-next::after {
+    background-image: url("https://hhh.com.tw/assets/images/rv_web/arrow-right.png");
+  }
+
+  .swiper-button-prev:after {
+    background-image: url("https://hhh.com.tw/assets/images/rv_web/arrow-left.png");
+  }
+
   .media-list {
     margin: auto;
     padding: 1rem 3rem;
@@ -196,6 +225,23 @@
       }
     }
   }
+
+  .other-list {
+    h5 {
+      margin-bottom: 0;
+      font-size: 1.125rem;
+      color: #727679;
+      letter-spacing: 1px;
+    }
+  }
+}
+
+.play-img {
+  width: 50px;
+  position: absolute;
+  top: 45%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 
 .breadcrumb-item.active {