88 lines
2.3 KiB
Plaintext
88 lines
2.3 KiB
Plaintext
<div class="widget-gallery widget1 no-print">
|
|
<h3 class="gallery-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=".widget1 .prev-button"
|
|
data-cycle-next=".widget1 .next-button"
|
|
data-cycle-pager=".widget1 .banner-pager"
|
|
data-cycle-pager-template="<span></span>">
|
|
|
|
|
|
<div class="widget-pic" style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap;">
|
|
<a href="{{link_to_show}}" title="{{album-name}}">
|
|
<img
|
|
srcset="
|
|
{{thumb-large-src}} 1024w,
|
|
{{thumb-src}} 768w"
|
|
src="{{thumb-src}}"
|
|
alt="{{alt_title}}"
|
|
>
|
|
</a>
|
|
<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 class="banner-pager"></div>
|
|
</div>
|
|
<script>
|
|
$(document).ready(function () {
|
|
var $slideshow = $('.widget1 .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: '.widget1 .prev-button',
|
|
next: '.widget1 .next-button',
|
|
pager: '.widget1 .banner-pager',
|
|
pagerTemplate: '<span></span>'
|
|
});
|
|
}
|
|
|
|
// 一開始初始化
|
|
initCarousel();
|
|
|
|
// resize 時重新初始化
|
|
$(window).on('resize', function () {
|
|
initCarousel();
|
|
});
|
|
});
|
|
</script>
|