orbit_demo_new_old/modules/gallery/_gallery_widget8.html.erb

<div class="widget-gallery widget8 no-print">
  <h3 class="widget-title">
    <span>{{widget-title}}</span>
  </h3>

  <div class="cycle-slideshow widget-content"
    data-level="0"
    data-list="images"
    data-cycle-slides="> .widget-pic"
    data-cycle-fx="carousel"
    data-cycle-timeout="3000"
    data-cycle-carousel-visible="4"
    data-cycle-pause-on-hover="true"
    data-cycle-log="false"
    data-cycle-carousel-fluid="true"
    data-cycle-prev="~ .button-mid .prev-button"
    data-cycle-next="~ .button-mid .next-button"
    data-cycle-pager="~ .banner-pager"
    data-cycle-pager-template="<span></span>">


    <div class="widget-pic" style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap;">
      
        <img
          srcset="
            {{thumb-large-src}} 1024w,
            {{thumb-src}} 768w"
          src="{{thumb-src}}"
          alt="{{alt_title}}"
        >
      
      <div style="clear: both;"></div>
      <a href="{{link_to_show}}" title="{{album-name}}">
        <div class="mask_title">{{image_description}}</div>
      </a>
      <a href="{{link_to_show}}" title="{{album-name}}">{{link_text}}</a>
    </div>


  </div>

  <ul class="button-mid">
    <i class="fa fa-angle-left prev-button" aria-label="上一張"></i>
    <i class="fa fa-angle-right next-button" aria-label="下一張"></i>
  </ul>

</div>
<script>
$(document).ready(function () {
  var $slideshow = $('.widget8 .cycle-slideshow');

  function initCarousel() {
    var visibleCount = $(window).width() < 768 ? 1 : 4;

    // 如果已經初始化，先 destroy
    var api = $slideshow.data('cycle.API');
    if (api) {
      api.destroy();
    }

    // 初始化 carousel
    $slideshow.cycle({
      fx: 'carousel',
      timeout: 3000,
      pauseOnHover: true,
      log: false,
      carouselVisible: visibleCount,
      carouselFluid: true,
      slides: '> .widget-pic',
      prev: '.widget8 .prev-button',
      next: '.widget8 .next-button',
      pager: '.widget8 .banner-pager',
      pagerTemplate: '<span></span>'
    });
  }

  // 一開始初始化
  initCarousel();

  // resize 時重新初始化
  $(window).on('resize', function () {
    initCarousel();
  });
});
$(document).ready(function () {

  $('.widget8').on('click', '.widget-pic img', function (e) {
    e.preventDefault();

    var $img = $(this);
    var imgAlt = $img.attr('alt') || '';
    var imgSrc;

    var srcset = $img.attr('srcset');

    if (srcset) {
      // 抓 srcset 第一個網址（通常是 thumb_large）
      imgSrc = srcset.split(',')[0].trim().split(' ')[0];
    } else {
      imgSrc = $img.attr('src');
    }

    if ($('.widget8-lightbox').length) return;

    var lightboxHtml = `
      <div class="widget8-lightbox">
        <div class="widget8-lightbox__overlay"></div>
        <div class="widget8-lightbox__content">
          <button class="widget8-lightbox__close" aria-label="關閉">×</button>
          <img src="${imgSrc}" alt="${imgAlt}">
        </div>
      </div>
    `;

    $('body').append(lightboxHtml);
  });

  $('body').on('click', '.widget8-lightbox__close, .widget8-lightbox__overlay', function () {
    $('.widget8-lightbox').fadeOut(200, function () {
      $(this).remove();
    });
  });

});

</script>
<style>
  .prev-button,.next-button{
      cursor: pointer;
  }
  .widget8-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
  }

  .widget8-lightbox__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
  }

  .widget8-lightbox__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90vw;
    max-height: 90vh;
        height: 800px;
      width: 800px;
  }

  .widget8-lightbox__content img {
    display: block;
    max-width: 100%;
    max-height: 90vh;
  }

  .widget8-lightbox__close {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #000;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
  }
    
</style>