This commit is contained in:
ken 2026-07-01 19:49:03 +08:00
parent 836ca64eec
commit 73aefd0c95
2 changed files with 25 additions and 21 deletions

View File

@ -20,7 +20,7 @@
data-cycle-title="{{title}}"
data-cycle-desc="{{context}}"
data-overlay-template="<h3>{{title}}</h3><p>{{desc}}</p>"
data-target="{{target}}"
data-bs-target="{{target}}"
>
<a href="{{link}}" target="{{target}}" title="{{alt_title}}">
<img class="w-ad-banner__image w-ba-banner__image banner-responsive" src="{{image_link}}" alt="{{alt_title}}">
@ -65,7 +65,22 @@
})
$('[data-subpart-id="{{subpart-id}}"] .prev-button').click(function(){
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("prev");
})
});
/* 修正點:處理 Pager 無障礙朗讀文字 */
$('.cycle-slideshow').on('cycle-post-initialize', function(event, optionHash) {
var $container = $(this).closest('.w-ba-banner');
var $slides = $(this).find('.w-ba-banner__slide');
var $pagerButtons = $container.find(".banner-pager button");
$pagerButtons.each(function(index) {
var slideTitle = $slides.eq(index).data('cycle-title') || "";
var ariaLabel = "第 " + (index + 1) + " 張投影片 " + slideTitle;
$(this).attr({
"aria-label": ariaLabel,
"title": ariaLabel
});
});
});
</script>
<style type="text/css">
.w-ba-banner .controlplay .resume-slide.active i{

View File

@ -9,21 +9,24 @@
data-cycle-timeout="{{timeout}}"
data-cycle-fx="{{ad_fx}}"
data-cycle-pager=".banner_caption_{{subpart-id}}"
data-pager-template="<li><a></a></li>"
data-pager-template="<li><button></button></li>"
data-pager-active-class="active-slide"
data-cycle-youtube=true
data-cycle-youtube-autostart=false
data-cycle-swipe=true
data-cycle-swipe-fx="scrollHorz"
>
<div class="w-ba-banner__slide {{class}}"
<div class="w-ba-banner__slide {{class}}"
data-link="{{link}}"
data-cycle-title="{{title}}"
data-cycle-desc="{{context}}"
data-overlay-template="<h3>{{title}}</h3>{{desc}}"
data-bs-target="{{target}}"
>
<a href="{{link}}" target="{{target}}" title="{{alt_title}}">
<img class="w-ba-banner__image banner-responsive" src="{{image_link}}" alt="{{alt_title}}">
</a>
<a href="{{link}}" target="{{target}}" title="{{alt_title}}">
<img class="w-ba-banner__image banner-responsive" src="{{image_link}}" alt="{{alt_title}}">
</a>
</div>
</div>
<ul class="w-ba-banner__pager-3 banner-pager banner_caption_{{subpart-id}}"></ul>
@ -38,23 +41,9 @@
<p style="display: none;"><%= I18n.t("ad_banner.pause") %></p>
</a>
</ul>
<ul class="button-mid">
<button class="prev-button" title = "<%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %>" aria-label="Pager"></button>
<button class="next-button" title = "<%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %>" aria-label="Pager"></button>
</ul>
</div>
<script>
var flag = 1;
$('[data-subpart-id="{{subpart-id}}"] .pause-slide').click(function(){
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('pause');
$(this).addClass('active')
$(this).parents('.controlplay').eq(0).find('.resume-slide').removeClass('active')
});
$('[data-subpart-id="{{subpart-id}}"] .resume-slide').click(function(){
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('resume');
$(this).addClass('active')
$(this).parents('.controlplay').eq(0).find('.pause-slide').removeClass('active')
});
$('.pause-slide').click(function(){
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('pause');
});