From ab6a528c5ab00c701ec410d81849d48b430e9bc8 Mon Sep 17 00:00:00 2001
From: ken <ken@orbitek.co>
Date: Thu, 24 Sep 2026 05:29:13 +0000
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E5=82=B3=E6=AA=94=E6=A1=88=E5=88=B0?=
 =?UTF-8?q?=E3=80=8Cmodules/video=5Fpro=E3=80=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 modules/video_pro/_video_pro_widget5.html.erb | 176 ++++++++
 modules/video_pro/_video_pro_widget6.html.erb | 126 ++++++
 modules/video_pro/_video_pro_widget8.html.erb | 387 ++++++++++++++++++
 modules/video_pro/info.json                   |  75 +++-
 .../video_pro_index_post_agency1.html.erb     |  37 +-
 5 files changed, 779 insertions(+), 22 deletions(-)
 create mode 100644 modules/video_pro/_video_pro_widget5.html.erb
 create mode 100644 modules/video_pro/_video_pro_widget6.html.erb
 create mode 100644 modules/video_pro/_video_pro_widget8.html.erb

diff --git a/modules/video_pro/_video_pro_widget5.html.erb b/modules/video_pro/_video_pro_widget5.html.erb
new file mode 100644
index 0000000..62ba580
--- /dev/null
+++ b/modules/video_pro/_video_pro_widget5.html.erb
@@ -0,0 +1,176 @@
+<div class="w-video_data video_data-widget-5 row">
+<h3 class="widget-title"><span>{{widget-title}}</span></h3>
+<ul class="video_data_wrap col-sm-8 cycle-slideshow"
+  data-list="videos"
+  data-level="0"
+  data-cycle-fx="scrollHorz"
+  data-cycle-timeout="0"
+  data-cycle-slides=".video_data"
+  data-cycle-pager="#pager-{{subpart-id}}"
+  data-cycle-next="#next-{{subpart-id}}"
+  data-cycle-prev="#prev-{{subpart-id}}"
+  data-cycle-pager-template="<a href='#' class='pager-item' data-slide-num=''><h5></h5></a>">
+ <li class="video_data col-xs-12 col-sm-12" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}" data-title="{{video_title}}">
+   <a  href="{{video_show_url}}" title="{{video_title_escape}}">
+    <div class="video_linkwrapper">
+      <div class="videohover">
+        <div class="view_info">
+          <span>{{view_count}}</span>
+        </div>
+        <div class="Video__Player"><div class="Video__PlayerButton"></div></div>
+        <div class="videoduration"></div>
+      </div>
+      <img class="video_snapshot" src="{{snapshot_url}}"/>
+    </div>
+    </a>
+    <div class="video_group_time">{{video_postdate}}</div>
+    <div class="video_info">
+      <div class="video_length">{{video_duration}}</div>
+      <div data-list="video_tags" data-level="1" class="video_tag"><div class="video_tags2">{{video_tag}}</div></div>
+      <div class="video_desc"><a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">{{video_desc}}</a></div>
+   </div>
+</li>
+</ul>
+  <div id="pager-{{subpart-id}}" class="cycle-pager col-sm-4"></div>
+  <div class="clearfix"></div>
+</div>
+<script>
+$(document).ready(function () {
+  setTimeout(function () {
+    $(".w-video_data").each(function () {
+      var $container = $(this);
+      var videoDataItems = $container.find(".video_data").not(".cycle-sentinel"); // 過濾 Cycle2 產生的複製元素
+
+      var videoData = videoDataItems.map(function () {
+        return {
+          title: $(this).attr("data-title"),
+          date: $(this).find(".video_group_time").text().trim() // 取得日期
+        };
+      }).get();
+
+      // 只影響「當前」輪播的 Pager Items
+      $container.find(".cycle-pager .pager-item").slice(0, videoData.length).each(function (index) {
+        var { title, date } = videoData[index];
+
+        $(this).attr("data-slide-num", index);
+
+        // 先移除舊的日期標籤，避免重複
+        $(this).find(".video-date").remove();
+
+        // 插入日期作為獨立的 <span>，放在 h5 之前
+        if (date) {
+          $("<span class='video-date'></span>").text(date + " ").prependTo(this);
+        }
+
+        $(this).find("h5").text(title);
+      });
+
+      // 只讓「當前」的 Pager 綁定點擊事件
+      $container.find(".cycle-pager").on("click", ".pager-item", function (e) {
+        e.preventDefault();
+        var index = $(this).attr("data-slide-num");
+
+        // 只影響「當前」輪播的 .cycle-slideshow
+        $container.find(".cycle-slideshow").cycle("goto", index);
+      });
+    });
+  }, 300);  // 延長時間確保 DOM 生成
+  setTimeout(function () {
+    $(".w-video_data.video_data-widget-5").each(function () { //限制只影響 .video_data-widget-5
+      var $container = $(this);
+      var $items = $container.find(".video_data").not(".cycle-sentinel"); // 過濾 Cycle2 產生的元素
+      var $pager = $container.find(".cycle-pager"); // 取得 Pager 容器
+      var totalItems = $items.length;
+      var itemsPerPage = 5; 
+      var currentIndex = 0;
+
+      // 取得所有 video_data 的標題與日期
+      var videoData = $items.map(function () {
+        return {
+          title: $(this).attr("data-title"),
+          date: $(this).find(".video_group_time").text().trim()
+        };
+      }).get();
+
+      // 生成對應的 .pager-item
+      var pagerHTML = "";
+      videoData.forEach(function ({ title, date }, index) {
+        pagerHTML += `<a href="#" class="pager-item" data-slide-num="${index}">`;
+        if (date) {
+          pagerHTML += `<span class="video-date">${date} </span>`;
+        }
+        pagerHTML += `<h5>${title}</h5></a>`;
+      });
+
+      $pager.html(pagerHTML); // 插入新的 Pager
+      var $pagerItems = $pager.find(".pager-item"); // 重新抓取 .pager-item
+      $pagerItems.hide(); // 先全部隱藏
+
+      // 插入按鈕（確保不會重複）
+      if ($pager.next(".pager-controls").length === 0) {
+        $pager.after(`
+          <div class="pager-controls">
+            <button class="prev-btn" title="下一張" aria-label="下一張"><i class="fa fa-angle-left prev-button" aria-hidden="true" style="font-size: 1.5rem;"></i></button>
+            <button class="next-btn" title="上一張" aria-label="上一張"><i class="fa fa-angle-right next-button" aria-hidden="true" style="font-size: 1.5rem;"></i></button>
+          </div>
+        `);
+      }
+
+      var $prevBtn = $pager.next(".pager-controls").find(".prev-btn");
+      var $nextBtn = $pager.next(".pager-controls").find(".next-btn");
+
+      // 更新顯示的 pager-item 和 video_data
+      function updateVisibleItems() {
+        var firstVisibleIndex = currentIndex; // 取得當前顯示的第一個 Index
+        var lastVisibleIndex = Math.min(currentIndex + itemsPerPage, totalItems);
+
+        // 隱藏所有
+        $items.hide().removeClass("cycle-slide-active");
+        $pagerItems.hide().removeClass("cycle-pager-active");
+
+        // 顯示當前的 3 個 pager-item
+        var visiblePagerItems = $pagerItems.slice(firstVisibleIndex, lastVisibleIndex).show();
+        
+        // 加上 `cycle-pager-active` 到第一個
+        var firstPagerItem = visiblePagerItems.first().addClass("cycle-pager-active");
+
+        // 取得對應的 video_data
+        var firstPagerIndex = firstPagerItem.data("slide-num");
+        var $firstVideoItem = $items.eq(firstPagerIndex).show().addClass("cycle-slide-active");
+      }
+
+      // 綁定 Pager 點擊事件
+      $pager.on("click", ".pager-item", function (e) {
+        e.preventDefault();
+        var index = $(this).data("slide-num"); // 獲取對應 index
+
+        $pagerItems.removeClass("cycle-pager-active");
+        $(this).addClass("cycle-pager-active");
+
+        $items.hide().removeClass("cycle-slide-active").eq(index).show().addClass("cycle-slide-active");
+      });
+
+      // 綁定上一頁按鈕
+      $prevBtn.off("click").on("click", function () {
+        if (currentIndex > 0) {
+          currentIndex -= itemsPerPage;
+          updateVisibleItems();
+        }
+      });
+
+      // 綁定下一頁按鈕
+      $nextBtn.off("click").on("click", function () {
+        if (currentIndex + itemsPerPage < totalItems) {
+          currentIndex += itemsPerPage;
+          updateVisibleItems();
+        }
+      });
+
+      // 初始化顯示
+      updateVisibleItems();
+    });
+  }, 300); // 延長時間確保 DOM 生成
+});
+
+
+</script>
\ No newline at end of file
diff --git a/modules/video_pro/_video_pro_widget6.html.erb b/modules/video_pro/_video_pro_widget6.html.erb
new file mode 100644
index 0000000..a7133e8
--- /dev/null
+++ b/modules/video_pro/_video_pro_widget6.html.erb
@@ -0,0 +1,126 @@
+<div class="w-video_data video_data-widget-6">
+<h3 class="widget-title"><span>{{widget-title}}</span></h3>
+<div class="btnwrapper" style="">
+  <button id="prev-{{subpart-id}}" class="btn-left" title = "<%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %>" style="transition: 0.4s;
+    float: left;
+    left: 0.5rem;
+    transition: 0.4s;
+    right: 0.5rem;
+    color: rgb(255, 255, 255);
+    background: rgba(0, 0, 0, 0.4);
+    text-align: center;
+    top: 50%;
+    position: absolute;
+    transform: translateY(-50%);
+    z-index: 999;
+    height: 2em !important;
+    width: 2em !important;
+    font-size: 1em !important;
+    line-height: 2rem !important;
+    border-radius: 1em;
+    border: 0;"><i class="fa fa-angle-left prev-button" aria-hidden="true" style="font-size: 1rem;"></i><span style="display: none;"><%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %></span></button>
+  <button id="next-{{subpart-id}}" class="btn-right" title = "<%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %>" style="
+    float: right;
+    transition: 0.4s;
+    right: 1.5rem;
+    color: rgb(255, 255, 255);
+    background: rgba(0, 0, 0, 0.4);
+    text-align: center;
+    top: 50%;
+    position: absolute;
+    transform: translateY(-50%);
+    z-index: 999;
+    height: 2em !important;
+    width: 2em !important;
+    font-size: 1em !important;
+    line-height: 2rem !important;
+    border-radius: 1em;
+    border: 0;"><i class="fa fa-angle-right next-button" aria-hidden="true" style="font-size: 1rem;"></i><span style="display: none;"><%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %></span></button>
+</div>
+  <ul class="video_data_wrap col-sm-12 cycle-slideshow" data-list="videos" data-level="0" data-cycle-fx="carousel"
+  data-cycle-timeout="0"
+  data-cycle-carousel-visible="1"
+  data-cycle-carousel-fluid="true"
+  data-cycle-next="#next-{{subpart-id}}"
+  data-cycle-prev="#prev-{{subpart-id}}"
+  data-cycle-slides=".video_data"
+  >
+  <li class="video_data col-xs-12 col-sm-4" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}" >
+  <a  href="{{video_show_url}}" title="{{video_title_escape}}">
+    <div class="video_linkwrapper">
+      <div class="videohover">
+        <div class="view_info">
+          <span>{{view_count}}</span>
+        </div>
+        <div class="Video__Player"><div class="Video__PlayerButton"></div></div>
+        <div class="videoduration"></div>
+      </div>
+      <img class="video_snapshot" src="{{snapshot_url}}"/>
+    </div>
+    
+    <div class="video_info">
+      <div class="video_length">{{video_duration}}</div>
+      <div data-list="video_tags" data-level="1" class="video_tag"><div class="video_tags2">{{video_tag}}</div></div>
+      <div class="video_keyword">{{video_keyword}}</div>
+      <div class="video_group_time">{{video_postdate}}</div>
+      <div class="video_title"><div class="video_link"><h4>{{video_title}}</h4></div></div>
+      <div class="video_desc"><div class="video_link">{{video_desc}}</div></div>
+    </div>
+  </a>
+</li>
+  </ul>
+  <div class="clearfix"></div>
+<style>
+
+  .video_title h5{
+    @extend .i-title;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .view_info{
+    float: right;
+  }
+  .view_info img{
+    margin-right: 5px;
+  }
+  .view_info{
+    max-height: 100%;
+    border-radius: 2px;
+    font-size: 0.875rem;
+    font-weight: normal;
+    letter-spacing: 0.3px;
+    text-align: center;
+    display: flex;
+    -webkit-box-align: center;
+    align-items: center;
+    position: absolute;
+    padding: 0px 8px;
+    background-color: #000000cc;
+    color: rgb(255, 255, 255);
+    z-index: 10;
+    top: 10px;
+    left: 10px;
+    border: 1px solid transparent;
+    line-height: 1.45;
+    span{
+      color:#fff;
+    }
+    &:before{
+      content: "";
+      display: inline-block;
+      margin-right: 5px;
+      width: 14px;
+      height: 10px;
+      background: url(/assets/icon-view@2x.png) no-repeat;
+      position: relative;
+      background-size: contain;
+    }
+  }
+</style>
+</div>
+<script>
+
+</script>
\ No newline at end of file
diff --git a/modules/video_pro/_video_pro_widget8.html.erb b/modules/video_pro/_video_pro_widget8.html.erb
new file mode 100644
index 0000000..d63abaa
--- /dev/null
+++ b/modules/video_pro/_video_pro_widget8.html.erb
@@ -0,0 +1,387 @@
+<div class="w-video_data video_data-widget-8" data-subpart-id="{{subpart-id}}">
+  <h3 class="widget-title"><span>{{widget-title}}</span></h3>
+
+  <div class="vw3-carousel">
+    <button class="vw3-prev" title="上一組" aria-label="上一組" type="button">
+      <i class="fa fa-angle-left" aria-hidden="true"></i>
+    </button>
+
+    <div class="vw3-track-wrap">
+      <ul class="video_data_wrap vw3-track" data-list="videos" data-level="0">
+        <li class="video_data vw3-slide" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}">
+          <a href="{{video_show_url}}" title="{{video_title_escape}}">
+            <div class="video_linkwrapper3">
+              <div class="videohover">
+                <div class="view_info"><span>{{view_count}}</span></div>
+                <div class="Video__Player"><button class="Video__PlayerButton" type="button"></button></div>
+              </div>
+              <img class="video_snapshot" src="{{snapshot_url}}" alt="{{video_title_escape}}">
+            </div>
+          </a>
+          <div class="video_info">
+            <div class="video_title">
+              <a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}"><h4>{{video_title}}</h4></a>
+            </div>
+            <div class="video_desc">
+              <a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">{{video_desc}}</a>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <button class="vw3-next" title="下一組" aria-label="下一組" type="button">
+      <i class="fa fa-angle-right" aria-hidden="true"></i>
+    </button>
+  </div>
+</div>
+
+<style>
+.video_data-widget-8 {
+  position: relative;
+
+  .widget-title { margin-bottom: 1rem; }
+
+  /* 外層輪播框 */
+  .vw3-carousel {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    position: relative;
+  }
+
+  /* 可視區域 */
+  .vw3-track-wrap {
+    overflow: hidden;
+    flex: 1;
+  }
+
+  /* 滑動軌道 */
+  .vw3-track {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    transition: transform 0.4s ease;
+  }
+
+  /* 所有 slide 共用 */
+  .vw3-slide {
+    flex-shrink: 0;
+    box-sizing: border-box;
+  }
+
+  /* 第一張大卡：40% 相對容器 */
+  .vw3-slide:nth-child(1) {
+    width: 40%;
+    position: relative;
+
+    .video_linkwrapper3 { margin-bottom: 0; }
+
+    .video_info {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      padding: 2rem 1rem 1rem;
+      background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
+      border-radius: 0 0 14px 14px;
+      z-index: 10;
+      margin: 0;
+    }
+
+    .video_title h4 {
+      color: #fff;
+      font-size: 1.15rem;
+      font-weight: 500;
+      margin: 0 0 0.2rem;
+    }
+
+    .video_desc,
+    .video_desc a {
+      color: rgba(255,255,255,0.85);
+      font-size: 0.85rem;
+    }
+  }
+
+  /* 後續小卡：各約 20% */
+  .vw3-slide:nth-child(n+2) {
+    width: calc(20% - 0.75rem);
+
+    .video_info {
+      padding: 0.5rem 0 0;
+      margin: 0;
+    }
+
+    .video_title h4 {
+      font-size: 0.95rem;
+      font-weight: 500;
+      color: #1a1a1a;
+      margin: 0 0 0.2rem;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+
+    .video_desc,
+    .video_desc a {
+      font-size: 0.82rem;
+      color: #666;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+  }
+
+  /* 圖片共用 */
+  .video_linkwrapper3 {
+    position: relative;
+    aspect-ratio: 16 / 9;
+    overflow: hidden;
+    border-radius: 14px;
+    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
+    transition: transform 0.22s ease, box-shadow 0.22s ease;
+
+    &:hover {
+      transform: translateY(-4px);
+      box-shadow: 0 8px 24px rgba(0,0,0,0.18);
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+    }
+  }
+
+  /* 播放按鈕 */
+  .Video__Player {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 10;
+  }
+
+  .Video__PlayerButton {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    background: rgba(255,255,255,0.85);
+    border: none;
+    cursor: pointer;
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 54%;
+      transform: translate(-50%, -50%);
+      width: 0;
+      height: 0;
+      border-style: solid;
+      border-width: 8px 0 8px 16px;
+      border-color: transparent transparent transparent #1a1a1a;
+    }
+
+    &:hover { background: #fff; }
+  }
+
+  /* 左右箭頭 */
+  .vw3-prev,
+  .vw3-next {
+    flex-shrink: 0;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background: rgba(0,0,0,0.15);
+    color: #fff;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.2rem;
+    transition: background 0.2s;
+    z-index: 10;
+
+    &:hover { background: rgba(0,0,0,0.4); }
+    &:focus { outline: 2px solid #2980b9; outline-offset: 2px; }
+    &:disabled { opacity: 0.3; cursor: default; }
+  }
+
+  /* view_info */
+  .view_info {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    background: rgba(0,0,0,0.75);
+    color: #fff;
+    font-size: 0.8rem;
+    padding: 2px 8px;
+    border-radius: 3px;
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  /* RWD */
+  @media(max-width: 768px) {
+    .vw3-slide:nth-child(1) { width: 100%; }
+    .vw3-slide:nth-child(n+2) { width: calc(50% - 0.5rem); }
+  }
+
+  @media(max-width: 480px) {
+    .vw3-slide:nth-child(n+2) { width: 100%; }
+  }
+}
+</style>
+
+<script>
+$(document).ready(function() {
+  var $widget    = $('[data-subpart-id="{{subpart-id}}"]');
+  var $trackWrap = $widget.find('.vw3-track-wrap');
+  var $track     = $widget.find('.vw3-track');
+  var $prevBtn   = $widget.find('.vw3-prev');
+  var $nextBtn   = $widget.find('.vw3-next');
+
+  var originalSlides = $widget.find('.vw3-slide').toArray();
+  var total          = originalSlides.length;
+  if (total === 0) return;
+
+  var currentIndex = 0; // 目前第一個顯示的 slide index（在 originalSlides 裡）
+
+  // 重建 track：把所有 slide 克隆三份（前後各補一輪），讓循環無縫
+  function buildTrack() {
+    $track.empty();
+    // 補後一輪（讓往右循環）
+    $(originalSlides).each(function() {
+      $track.append($(this).clone().addClass('vw3-clone'));
+    });
+    // 原始
+    $(originalSlides).each(function() {
+      $track.append($(this).clone());
+    });
+    // 補前一輪（讓往左循環）
+    $(originalSlides).each(function() {
+      $track.append($(this).clone().addClass('vw3-clone'));
+    });
+  }
+
+  function getVisibleCount() {
+    return $(window).width() < 1024 ? 1 : 4;
+  }
+
+  function isMobile() {
+    return $(window).width() < 1024;
+  }
+
+  // 更新每個 slide 的寬度
+  function updateWidths() {
+    var $allSlides   = $track.find('.vw3-slide');
+    var wrapWidth    = $trackWrap.width();
+    var gap          = 16;
+    var visibleCount = getVisibleCount();
+    var mobile       = isMobile();
+
+    // 先全部清除大卡樣式
+    $allSlides.find('.video_info').css({
+      'color'            : '',
+      'position'         : '',
+      'bottom'           : '',
+      'width'            : '',
+      'padding'          : '',
+      'background-image' : '',
+      'border-radius'    : ''
+    });
+    $allSlides.find('.video_title h4').css({
+      'color'     : '',
+      'font-size' : ''
+    });
+
+    if (mobile) {
+      // 手機：一次一則，全寬，不套大卡樣式
+      $allSlides.css('width', wrapWidth + 'px');
+    } else {
+      // 桌機：第一張 40%，其餘平分
+      var bigWidth   = wrapWidth * 0.4;
+      var smallTotal = wrapWidth - bigWidth - gap * (visibleCount - 1);
+      var smallWidth = smallTotal / (visibleCount - 1);
+
+      $allSlides.css('width', smallWidth + 'px');
+
+      var firstVisibleIdx = total + currentIndex;
+      var $firstSlide     = $allSlides.eq(firstVisibleIdx);
+
+      $firstSlide.css('width', bigWidth + 'px');
+
+      $firstSlide.find('.video_info').css({
+        'color'            : '#fff',
+        'position'         : 'absolute',
+        'bottom'           : '0',
+        'width'            : '100%',
+        'padding'          : '2em',
+        'background-image' : 'linear-gradient(180deg, transparent 0, #00000066 40%, #000000a3)',
+        'border-radius'    : '0 0 14px 14px'
+      });
+
+      $firstSlide.find('.video_title h4').css({
+        'color'     : '#fff',
+        'font-size' : '1.5em'
+      });
+    }
+  }
+
+  // 計算 track 的 translateX，讓第一個顯示的 slide 對齊左邊
+  function getOffset(targetIdx) {
+    var $allSlides = $track.find('.vw3-slide');
+    var offset = 0;
+    var gap    = 16;
+    for (var i = 0; i < targetIdx; i++) {
+      offset += parseFloat($allSlides.eq(i).css('width')) + gap;
+    }
+    return offset;
+  }
+
+  function goTo(newIndex, animate) {
+    currentIndex = ((newIndex % total) + total) % total;
+
+    updateWidths();
+
+    var targetIdx = total + currentIndex; // 中間那組的 index
+    var offset    = getOffset(targetIdx);
+
+    if (animate === false) {
+      $track.css('transition', 'none');
+      $track.css('transform', 'translateX(-' + offset + 'px)');
+      $track[0].offsetHeight; // force reflow
+      $track.css('transition', '');
+    } else {
+      $track.css('transform', 'translateX(-' + offset + 'px)');
+    }
+  }
+
+  // 初始化
+  buildTrack();
+  goTo(0, false);
+
+  $prevBtn.on('click', function() {
+    goTo(currentIndex - 1, true);
+  });
+
+  $nextBtn.on('click', function() {
+    goTo(currentIndex + 1, true);
+  });
+
+  $(window).on('resize', function() {
+    goTo(currentIndex, false);
+  });
+});
+</script>
diff --git a/modules/video_pro/info.json b/modules/video_pro/info.json
index 5c1b39b..0d8aa8d 100644
--- a/modules/video_pro/info.json
+++ b/modules/video_pro/info.json
@@ -7,7 +7,61 @@
                 "zh_tw" : "1. 影片列表1 ( 縮圖, 影片資訊, 頁面連結)",
                 "en" : "1. Video List 1 ( snapshot, video info, page link)"
                 },
-            "thumbnail" : "thumb.png"
+            "thumbnail" : "video_pro_widget1_thumb.png"
+        },
+        {
+            "filename" : "video_pro_widget2",
+            "force_cover": "true",
+            "name" : {
+                "zh_tw" : "2. 影片列表2 ( 縮圖, 影片資訊, 頁面連結)",
+                "en" : "2. Video List 2 ( snapshot, video info, page link)"
+                },
+            "thumbnail" : "video_pro_widget2_thumb.png"
+        },
+        {
+            "filename" : "video_pro_widget3",
+            "force_cover": "true",
+            "name" : {
+                "zh_tw" : "3. 影片列表倫波 ( 縮圖, 影片資訊, 頁面連結)",
+                "en" : "3.carousel-Video List  ( snapshot, video info, page link)"
+                },
+            "thumbnail" : "video_pro_widget3_thumb.png"
+        },
+        {
+            "filename" : "video_pro_widget4",
+            "force_cover": "true",
+            "name" : {
+                 "zh_tw" : "4. 四欄影片列表 ( 縮圖, 影片資訊, 頁面連結)",
+                 "en" : "4. 4col-Video List 1 ( snapshot, video info, page link)"
+                 },
+            "thumbnail" : "video_pro_widget4_thumb.png"
+         },
+        {
+            "filename" : "video_pro_widget5",
+            "force_cover": "true",
+            "name" : {
+                "zh_tw" : "5. 大圖影片列表倫波 ( 縮圖, 影片資訊, 頁面連結)",
+                "en" : "5.bigcarousel-Video List  ( snapshot, video info, page link)"
+                },
+            "thumbnail" : "video_pro_widget5_thumb"
+        },
+        {
+            "filename" : "video_pro_widget6",
+            "force_cover": "true",
+            "name" : {
+                "zh_tw" : "6. 影片單欄倫波 ( 縮圖, 影片資訊, 頁面連結)",
+                "en" : "6.carousel-Video 1 List  ( snapshot, video info, page link)"
+                },
+            "thumbnail" : "video_pro_widget6_thumb.png"
+        },
+        {
+            "filename" : "video_pro_widget8",
+            "force_cover": "true",
+            "name" : {
+                "zh_tw" : "8.一大三小影片列表倫波 ( 縮圖, 影片資訊, 頁面連結)",
+                "en" : "8.one big three small carousel-Video List  ( snapshot, video info, page link)"
+                },
+            "thumbnail" : "video_pro_widget3_thumb.png"
         },
         {
             "filename" : "video_pro_widget_jqcloud1",
@@ -16,7 +70,7 @@
                 "zh_tw" : "2. 影片文字雲(標籤)",
                 "en" : "2. Video Word Cloud(tags)"
                 },
-            "thumbnail" : "thumb.png"
+            "thumbnail" : "video_pro_widgetcloud_thumb"
         }
     ],
     "frontend" : [
@@ -51,8 +105,8 @@
             "filename" : "video_pro_index3",
             "force_cover": "true",
             "name" : {
-                "zh_tw" : "3. 影片列表2 + 懸浮框 ( 縮圖, 影片資訊)",
-                "en" : "3. Video List 2 + Modal window ( snapshot, video info)"
+                "zh_tw" : "3. 三欄 影片列表 + 懸浮框 ( 縮圖, 影片資訊)",
+                "en" : "3. 3col-Video List + Modal window ( snapshot, video info)"
                 },
             "thumbnail" : "thumb.png"
         },
@@ -60,8 +114,17 @@
             "filename" : "video_pro_index_post_agency1",
             "force_cover": "true",
             "name" : {
-                "zh_tw" : "4. 影片列表3 + 發佈單位篩選 ( 縮圖, 影片資訊, 關鍵字, 頁面連結)",
-                "en" : "4. Video List 3 + Post Agency filter ( snapshot, video info, keyword, page link)"
+                "zh_tw" : "4. 三欄影片列表 + 發佈單位篩選 ( 縮圖, 影片資訊, 關鍵字, 頁面連結)",
+                "en" : "4. 3col-Video List + Post Agency filter ( snapshot, video info, keyword, page link)"
+                },
+            "thumbnail" : "thumb.png"
+        },
+        {
+            "filename" : "video_pro_index4",
+            "force_cover": "true",
+            "name" : {
+                "zh_tw" : "4. 三欄影片列表 + 類別 + 搜尋 ( 縮圖, 影片資訊, 頁面連結)",
+                "en" : "4. 3col-Video List + Category filter + Search ( snapshot, video info, page link)"
                 },
             "thumbnail" : "thumb.png"
         }
diff --git a/modules/video_pro/video_pro_index_post_agency1.html.erb b/modules/video_pro/video_pro_index_post_agency1.html.erb
index 726f002..8f8a41e 100644
--- a/modules/video_pro/video_pro_index_post_agency1.html.erb
+++ b/modules/video_pro/video_pro_index_post_agency1.html.erb
@@ -12,15 +12,20 @@
   <ul class="video_data_wrap" data-list="videos" data-level="0">
     <li class="video_data col-sm-4" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}">
       <a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">
+      <div class="video_linkwrapper">
+        <div class="videohover">
+          <div class="Video__Player"><div class="Video__PlayerButton"></div></div>
+          <div class="videoduration"></div>
+        </div>
         <img class="video_snapshot" src="{{snapshot_url}}"/>
+      </div>
         <div class="video_info">
           <div class="video_group_time">{{video_post_agency}} | {{video_postdate}}</div>
           <div class="video_keyword">{{keyword_trans}}: {{video_keyword}}</div>
           <div class="video_title"><h4>{{video_title}}</h4></div>
           <div class="video_desc">{{video_desc}}</div>
           <div class="view_info">
-            <span><img src="{{hd_icon_url}}" alt="HD"></span>
-            <span><img src="{{view_icon_url}}" alt="{{view_count_trans}}>">x {{view_count}}</span>
+            <span>x {{view_count}}</span>
           </div>
         </div>
       </a>
@@ -28,6 +33,12 @@
   </ul>
   <div class="clearfix"></div>
   <style>
+    .video_data{
+      margin-bottom: 1em;
+    }
+    .video_info {
+        margin: 1em 0;
+    }
     .video_filter_area {
       margin-bottom: 20px;
     }
@@ -67,19 +78,13 @@
     .video_data_wrap {
       padding-left: 0;
     }
-    .video_group_time {
-      color: #4487cb;
-    }
-    .video_tag {
-      color: #e4374a;
-    }
-    .video_title h4 {
-      font-size: 1.6em;
-      font-weight: bold;
-      margin-bottom: 0;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
+    .video_title h5 {
+            @extend .i-title;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            text-overflow: ellipsis;
     }
     .view_info {
       float: right;
@@ -94,4 +99,4 @@
     })
   </script>
 </div>
-{{pagination_goes_here}}
\ No newline at end of file
+{{pagination_goes_here}}