605 lines
24 KiB
Plaintext
605 lines
24 KiB
Plaintext
<div class="w-ad-banner ad-banner-widget-2 w-ba-banner ba-banner-widget-1 ba-banner-widget-youtube">
|
||
<div class="w-ad-banner__wrap w-ba-banner__wrap cycle-slideshow"
|
||
data-list="images"
|
||
data-level="0"
|
||
data-cycle-slides=".w-ba-banner__slide"
|
||
data-cycle-log="false"
|
||
data-overlay=".w-ad-banner__overlay_{{subpart-id}}"
|
||
data-overlay-template="<h2><span>{{title}}</span></h2>{{desc}}"
|
||
data-cycle-auto-height="false"
|
||
data-cycle-speed="{{speed}}"
|
||
data-cycle-timeout="{{timeout}}"
|
||
data-cycle-fx="{{ad_fx}}"
|
||
data-pager=".banner_caption_{{subpart-id}}"
|
||
data-cycle-pager-template="<li><img src='{{src}}' alt='thumbnail'></li>"
|
||
data-pager-active-class="active-slide"
|
||
data-cycle-youtube="true"
|
||
data-cycle-youtube-autostart="false"
|
||
data-cycle-swipe="true"
|
||
data-cycle-prev=".banner_prev"
|
||
data-cycle-next=".banner_next"
|
||
data-cycle-pause-on-hover="true"
|
||
style="padding-bottom: 56.25%;"
|
||
>
|
||
|
||
{{html}}
|
||
</div>
|
||
<div class="ad-overlay w-ad-banner__overlay_{{subpart-id}}"></div>
|
||
|
||
<ul class="controlplay" role="radiogroup" aria-label="播放控制選項">
|
||
<a role="radio" aria-checked="true" href="javascript:;" class="resume-slide active" title="繼續播放" aria-label="繼續播放" aria-live="assertive">
|
||
<i aria-hidden="true"></i>
|
||
<p style="display: none;"><%= I18n.t("ad_banner.resume") %></p>
|
||
</a>
|
||
|
||
<a role="radio" aria-checked="false" href="javascript:;" class="pause-slide" title="暫停播放" aria-label="暫停播放" aria-live="assertive">
|
||
<i aria-hidden="true"></i>
|
||
<p style="display: none;"><%= I18n.t("ad_banner.pause") %></p>
|
||
</a>
|
||
</ul>
|
||
<ul class="button-mid">
|
||
<i class="fa fa-angle-left prev-button" aria-label="<%= I18n.t("ad_banner.prev") %>"></i>
|
||
<i class="fa fa-angle-right next-button" aria-label="<%= I18n.t("ad_banner.next") %>"></i>
|
||
</ul>
|
||
<div class="pager-wrapper">
|
||
<div class="w-ba-banner__caption w-ad-banner__pager-2 banner-pager banner_caption_{{subpart-id}}"></div>
|
||
<div class="pager-control">
|
||
<button class="pager-prev"><i class="fa fa-angle-left pager-prev-button" aria-label="上一張"></i></button>
|
||
<button class="pager-next"><i class="fa fa-angle-right pager-next-button" aria-label="下一張"></i></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script type="text/javascript">
|
||
var ad_trigger_time;
|
||
if (typeof ad_banners_count === 'undefined'){
|
||
var ad_banners_count = 0;
|
||
}
|
||
var control_play_btn_pause = function(){
|
||
this.attr('aria-label', '<%= I18n.t("ad_banner.resume") %>');
|
||
this.attr('title', '<%= I18n.t("ad_banner.resume") %>');
|
||
this.find('p').text('<%= I18n.t("ad_banner.resume") %>');
|
||
this.find('i.fa-pause').removeClass('fa-pause').addClass('fa-play');
|
||
}
|
||
var control_play_btn_play = function(){
|
||
this.attr('aria-label', '<%= I18n.t("ad_banner.pause") %>');
|
||
this.attr('title', '<%= I18n.t("ad_banner.pause") %>');
|
||
this.find('p').text('<%= I18n.t("ad_banner.pause") %>');
|
||
this.find('i.fa-play').removeClass('fa-play').addClass('fa-pause');
|
||
}
|
||
function ad_audio_button(ele,is_stop){
|
||
var $self = $(ele);
|
||
var button_container = $self.parents('.ba-banner-widget-youtube').eq(0);
|
||
var append_class = "";
|
||
if (is_stop){
|
||
button_container.find('.jarallax-video-audio').remove();
|
||
var control_play_btn = $('.jarallax-video-control-play');
|
||
if(control_play_btn.length){
|
||
control_play_btn_pause.call(control_play_btn);
|
||
}
|
||
}else{
|
||
var control_play_btn = null;
|
||
if(window.accessibility_mode){
|
||
append_class = " accessibility_mode_btn";
|
||
var control_play_btn = $('.jarallax-video-control-play');
|
||
if(control_play_btn.length){
|
||
|
||
control_play_btn_play.call(control_play_btn);
|
||
control_play_btn = null;
|
||
}else{
|
||
control_play_btn = $('<button title="<%= I18n.t("ad_banner.pause") %>" class="jarallax-video-control-play"><i class="fas fa-pause" aria-label="<%= I18n.t("ad_banner.pause") %>" aria-hidden="true"></i><p style=\"display: none;\"><%= I18n.t("ad_banner.pause") %></p></button>');
|
||
}
|
||
}
|
||
var audio_div;
|
||
if ($self.hasClass('have-audio')){
|
||
audio_div = $('<button title="<%= I18n.t("ad_banner.muted") %>" class="jarallax-video-audio'+append_class+'"><i class="fas fa-volume-up" aria-label="<%= I18n.t("ad_banner.muted") %>" aria-hidden="true"></i><p style=\"display: none;\"><%= I18n.t("ad_banner.muted") %></p></button>');
|
||
}else{
|
||
audio_div = $('<button title="<%= I18n.t("ad_banner.unmuted") %>" class="jarallax-video-audio'+append_class+'"><i class="fas fa-volume-mute" aria-label="<%= I18n.t("ad_banner.unmuted") %>" aria-hidden="true"></i><p style=\"display: none;\"><%= I18n.t("ad_banner.unmuted") %></p></button>');
|
||
}
|
||
audio_div.find('p').css('display','none'); //fix CSP
|
||
audio_div.click(function(event) {
|
||
var currentTime = new Date();
|
||
if (ad_trigger_time&¤tTime-ad_trigger_time<500){
|
||
return false;
|
||
}else{
|
||
ad_trigger_time = currentTime;
|
||
}
|
||
event.stopPropagation();
|
||
var $video = $self.find('video');
|
||
if ($self.hasClass('have-audio')){
|
||
$self.removeClass('have-audio');
|
||
$(this).attr('title','<%= I18n.t("ad_banner.unmuted") %>').find('i.fas').attr('class','fas fa-volume-mute').attr('aria-label','<%= I18n.t("ad_banner.unmuted") %>');
|
||
}else{
|
||
$self.addClass('have-audio');
|
||
$(this).attr('title','<%= I18n.t("ad_banner.muted") %>').find('i.fas').attr('class','fas fa-volume-up').attr('aria-label','<%= I18n.t("ad_banner.muted") %>');
|
||
}
|
||
if ($video.length>0){
|
||
$self.jPlayer("mute", !$self.data().jPlayer.options.muted);
|
||
}else{//youtube
|
||
var player = $self.find('iframe').data("yt_player");
|
||
if (player.isMuted()){
|
||
player.unMute();
|
||
}else{
|
||
player.mute();
|
||
}
|
||
}
|
||
});
|
||
button_container.find('.jarallax-video-audio').remove();
|
||
var caption = button_container.find('.w-ba-banner__caption');
|
||
var banner_overlay = button_container.find('.banner-overlay');
|
||
if (banner_overlay.length) {
|
||
audio_div.insertBefore(banner_overlay);
|
||
} else {
|
||
button_container.append(audio_div);
|
||
}
|
||
if(control_play_btn != null){
|
||
if (banner_overlay.length) {
|
||
control_play_btn.insertBefore(banner_overlay);
|
||
} else {
|
||
button_container.append(control_play_btn);
|
||
}
|
||
control_play_btn.click(function(){
|
||
var cycle_slideshow = button_container.find('.cycle-slideshow');
|
||
var opts = cycle_slideshow.data('cycle.opts');
|
||
var active_slide = opts.slides.filter('.'+opts.slideActiveClass);
|
||
if(active_slide.length){
|
||
var yt_iframe = active_slide.find('iframe');
|
||
if(yt_iframe.length == 0){
|
||
var jplayer = active_slide.find('.jp-jplayer').data('jPlayer');
|
||
if(jplayer){
|
||
if(jplayer.htmlElement.video.paused){
|
||
jplayer.play();
|
||
}else{
|
||
jplayer.pause();
|
||
}
|
||
}
|
||
}else{
|
||
if(window.yt_players){
|
||
var subpart_id = button_container.attr('data-subpart-id');
|
||
var subpart_yt_players = window.yt_players[subpart_id];
|
||
if(subpart_yt_players){
|
||
var yt_player = subpart_yt_players[yt_iframe.attr('id')];
|
||
var play_state = yt_player.getPlayerState();
|
||
if(play_state == YT.PlayerState.PLAYING || play_state == YT.PlayerState.BUFFERING){
|
||
yt_player.pauseVideo();
|
||
}else if(play_state == YT.PlayerState.UNSTARTED || play_state == YT.PlayerState.PAUSED || play_state == YT.PlayerState.ENDED || play_state == YT.PlayerState.CUED){
|
||
yt_player.playVideo();
|
||
play_state = yt_player.getPlayerState();
|
||
if(play_state == YT.PlayerState.UNSTARTED || play_state == YT.PlayerState.PAUSED || play_state == YT.PlayerState.ENDED || play_state == YT.PlayerState.CUED){
|
||
yt_player.mute().playVideo();
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
|
||
}
|
||
if(document.getElementById("youtube-iframe-api") == null){
|
||
var tag = document.createElement('script');
|
||
tag.setAttribute("id", "youtube-iframe-api");
|
||
tag.src = "https://www.youtube.com/iframe_api";
|
||
var firstScriptTag = document.getElementsByTagName('script')[0];
|
||
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
|
||
}
|
||
if(window.init_yt_banner == undefined){
|
||
function init_yt_banner(banner__slide){
|
||
var $banner__slide = $(banner__slide);
|
||
if( $banner__slide.data("yt-binded")== "0" ){
|
||
$banner__slide.data("yt-binded","1");
|
||
var obj = $banner__slide.find("iframe");
|
||
obj.attr("id", $banner__slide.data("youtube-id") + "_" + ad_banners_count);
|
||
ad_banners_count++;
|
||
}
|
||
}
|
||
}
|
||
$("*[data-yt-binded=0]").each(function(){
|
||
init_yt_banner(this);
|
||
})
|
||
if (typeof onYouTubeIframeAPIReady !== 'function'){
|
||
$(document).ready(function() {
|
||
$(document).on('touchstart click mousedown',".jarallax-video-audio",function(){
|
||
$(this).trigger('click');
|
||
});
|
||
});
|
||
if(window.yt_players == undefined)
|
||
window.yt_players = {};
|
||
function find_out_yt_event_list_key(yt_player){
|
||
var defalt_key = 'o';
|
||
var all_keys = Object.keys(yt_player).filter(function(s){return s.length == 1});
|
||
var prop_nums_thresh = 6;
|
||
if(all_keys.indexOf(defalt_key) != -1){
|
||
if((yt_player[defalt_key] instanceof Object) && Object.keys(yt_player[defalt_key]).length > prop_nums_thresh){
|
||
return defalt_key;
|
||
}
|
||
}
|
||
var event_key;
|
||
all_keys.forEach(function(k){
|
||
if((yt_player[k] instanceof Object) && Object.keys(yt_player[k]).length > prop_nums_thresh){
|
||
event_key = k;
|
||
return false;
|
||
}
|
||
})
|
||
return event_key;
|
||
}
|
||
function find_out_yt_event_list_count_key(yt_player, event_list_key){
|
||
var defalt_key = 'v';
|
||
var all_keys = Object.keys(yt_player).filter(function(s){return s.length == 1});
|
||
var equal_count = yt_player[event_list_key].length;
|
||
if(all_keys.indexOf(defalt_key) != -1){
|
||
if(yt_player[defalt_key] == equal_count){
|
||
return defalt_key;
|
||
}
|
||
}
|
||
var count_key;
|
||
all_keys.forEach(function(k){
|
||
if(yt_player[k] == equal_count){
|
||
count_key = k;
|
||
return false;
|
||
}
|
||
})
|
||
return count_key;
|
||
}
|
||
function find_out_yt_event_list_array_key(event_dict){
|
||
var defalt_key = 'i';
|
||
var all_keys = Object.keys(event_dict);
|
||
if(all_keys.indexOf(defalt_key) != -1){
|
||
var tmp = event_dict[defalt_key];
|
||
if(Array.isArray(tmp) && tmp.indexOf('onStateChange') != -1){
|
||
return defalt_key;
|
||
}
|
||
}
|
||
var array_key;
|
||
all_keys.forEach(function(k){
|
||
var tmp = event_dict[k];
|
||
if(Array.isArray(tmp) && tmp.indexOf('onStateChange') != -1){
|
||
array_key = k;
|
||
return false;
|
||
}
|
||
})
|
||
return array_key;
|
||
}
|
||
function find_out_yt_event_relation_key(event_dict, is_obj){ // is_obj = true => store event idx array. false => store whether event init(true or false)
|
||
var defalt_key = 'j';
|
||
var all_keys = Object.keys(event_dict);
|
||
if(all_keys.indexOf(defalt_key) != -1){
|
||
var tmp = event_dict[defalt_key];
|
||
if((tmp instanceof Object) && tmp['onStateChange']){
|
||
if(!is_obj || (tmp['onStateChange'] instanceof Object)){
|
||
return defalt_key;
|
||
}
|
||
}
|
||
}
|
||
var relation_key;
|
||
all_keys.forEach(function(k){
|
||
var tmp = event_dict[k];
|
||
if((tmp instanceof Object) && tmp['onStateChange']){
|
||
if(!is_obj || (tmp['onStateChange'] instanceof Object)){
|
||
relation_key = k;
|
||
return false;
|
||
}
|
||
}
|
||
})
|
||
return relation_key;
|
||
}
|
||
function onYouTubeIframeAPIReady(){
|
||
$(".w-ba-banner").on('cycle-post-initialize', function(){
|
||
init_banner(this);
|
||
});
|
||
function init_banner(banner){
|
||
var $banner = $(banner);
|
||
$banner.find('.w-ad-banner__slide').each(function(j, banner__slide){
|
||
init_yt_banner(banner__slide);
|
||
})
|
||
var iframes = $banner.find("iframe");
|
||
if(iframes.length > 0){
|
||
var id = $banner.attr("data-subpart-id");
|
||
if(yt_players[id] == undefined)
|
||
yt_players[id] = {};
|
||
var remove_ids = [];
|
||
Object.keys(yt_players[id]).forEach(function(k){
|
||
var yt_player = yt_players[id][k];
|
||
if($(yt_player.getIframe()).length == 0){
|
||
yt_player.destroy();
|
||
remove_ids.push(k);
|
||
}
|
||
})
|
||
remove_ids.forEach(function(k){
|
||
delete yt_players[id][k];
|
||
})
|
||
iframes.each(function(i,iframe){
|
||
var $iframe = $(iframe);
|
||
var yt_id = $iframe.attr("id");
|
||
var yt_player = yt_players[id][yt_id];
|
||
if(yt_player){
|
||
}else{
|
||
yt_player = new YT.Player(yt_id, {
|
||
events: {
|
||
'onReady': function(event){
|
||
var yt_player = event.target;
|
||
var height = $(yt_player.getIframe()).height();
|
||
var banner_wrap = $iframe.parents('.w-ba-banner__wrap').eq(0);
|
||
var carousel_wrap = banner_wrap.find(".cycle-carousel-wrap");
|
||
if(carousel_wrap.length){
|
||
carousel_wrap.css("top","3em");
|
||
height += parseInt(carousel_wrap.css('font-size')) * 3;
|
||
}
|
||
var overlay_in_slide = $iframe.parent().siblings('.ad-overlay,.banner-overlay');
|
||
if(overlay_in_slide.length != 0){
|
||
height += overlay_in_slide.outerHeight(true);
|
||
}
|
||
banner_wrap.height(height).css({"padding-bottom":"","padding-top":""});
|
||
var init_key = find_out_yt_event_relation_key(yt_player, false);
|
||
if(init_key){
|
||
delete yt_player[init_key].onStateChange;
|
||
}
|
||
else{
|
||
console.log("{onReady: true, onStateChange: true} missing!");
|
||
}
|
||
var event_list_key = find_out_yt_event_list_key(yt_player);
|
||
if(event_list_key){
|
||
var event_dict = yt_player[event_list_key];
|
||
var array_key = find_out_yt_event_list_array_key(event_dict);
|
||
var count_key = find_out_yt_event_list_count_key(event_dict, array_key);
|
||
var relation_key = find_out_yt_event_relation_key(event_dict, true);
|
||
var onStateChange_idx = event_dict[relation_key].onStateChange;
|
||
onStateChange_idx.reverse();
|
||
var event_size = 3;
|
||
onStateChange_idx.forEach(function(start_idx){
|
||
event_dict[array_key].splice(start_idx,event_size);
|
||
});
|
||
event_dict[relation_key].onStateChange = [];
|
||
event_dict[count_key] = event_dict[array_key].length;
|
||
yt_player.addEventListener('onStateChange',onPlayerStateChange);
|
||
banner_wrap.trigger('resize');
|
||
}else{
|
||
console.log("YT player changes its variables!")
|
||
}
|
||
{{extra_ready_script}}
|
||
},
|
||
'onStateChange': onPlayerStateChange
|
||
}
|
||
});
|
||
yt_players[id][yt_id] = yt_player;
|
||
$iframe.data("yt_player",yt_player);
|
||
}
|
||
})
|
||
}
|
||
}
|
||
$(".w-ba-banner").each(function(i,banner){
|
||
init_banner(banner);
|
||
})
|
||
}
|
||
function onPlayerStateChange(event){
|
||
var iframe = $(event.target.getIframe()),
|
||
cyclediv = iframe.parents("div.cycle-slideshow");
|
||
var widget = cyclediv.parents('.ba-banner-widget-youtube');
|
||
if(event.data == YT.PlayerState.PLAYING || event.data == YT.PlayerState.BUFFERING){
|
||
cyclediv[0].need_resume = !(cyclediv.hasClass("cycle-paused"));
|
||
cyclediv.cycle("pause");
|
||
widget.find('.banner-pager,.controlplay,.button-mid,.ad-overlay,.banner-overlay').css('visibility','hidden')
|
||
ad_audio_button(iframe.parents(".w-ad-banner__slide").eq(0),false);
|
||
}else if(event.data == YT.PlayerState.UNSTARTED || event.data == YT.PlayerState.PAUSED || event.data == YT.PlayerState.ENDED){
|
||
if(cyclediv[0].need_resume)
|
||
cyclediv.cycle("resume");
|
||
widget.find('.banner-pager,.controlplay,.button-mid,.ad-overlay,.banner-overlay').css('visibility','')
|
||
ad_audio_button(iframe.parents(".w-ad-banner__slide").eq(0),true);
|
||
}
|
||
{{extra_state_chnage_script}}
|
||
}
|
||
}
|
||
$(document).ready(function(){
|
||
window.onYouTubePlayerAPIReady = function() {
|
||
onYouTubeIframeAPIReady.apply(this,arguments);
|
||
};
|
||
var banner_wrap = $(".w-ba-banner__wrap[data-overlay=\".w-ad-banner__overlay_{{subpart-id}}\"]");
|
||
var opts = banner_wrap.data('cycle.opts');
|
||
banner_wrap.on('cycle-paused',function(opts){
|
||
var controlplay = $(this).nextAll(".controlplay");
|
||
if(controlplay.length != 0){
|
||
controlplay.find(".resume-slide").removeClass("active");
|
||
controlplay.find(".pause-slide").addClass("active");
|
||
}
|
||
})
|
||
banner_wrap.on('cycle-resumed',function(opts){
|
||
if(!($(this).data('paused'))){
|
||
var controlplay = $(this).nextAll(".controlplay");
|
||
if(controlplay.length != 0){
|
||
controlplay.find(".resume-slide").addClass("active");
|
||
controlplay.find(".pause-slide").removeClass("active");
|
||
}
|
||
}
|
||
});
|
||
|
||
|
||
banner_wrap.css("padding-bottom","");
|
||
{{extra_document_ready_script}}
|
||
$('[data-subpart-id="{{subpart-id}}"] .pause-slide').click(function(e){
|
||
e.preventDefault(); // 阻止預設行為
|
||
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").data('paused', true).cycle('pause');
|
||
$(this).addClass('active');
|
||
$(this).parents('.controlplay').eq(0).find('.resume-slide').removeClass('active');
|
||
});
|
||
|
||
$('[data-subpart-id="{{subpart-id}}"] .resume-slide').click(function(e){
|
||
e.preventDefault();
|
||
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").data('paused', false).cycle('resume');
|
||
$(this).addClass('active');
|
||
$(this).parents('.controlplay').eq(0).find('.pause-slide').removeClass('active');
|
||
});
|
||
|
||
$('[data-subpart-id="{{subpart-id}}"] .next-button').click(function(e){
|
||
e.preventDefault();
|
||
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("next");
|
||
});
|
||
|
||
$('[data-subpart-id="{{subpart-id}}"] .prev-button').click(function(e){
|
||
e.preventDefault();
|
||
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("prev");
|
||
});
|
||
|
||
// 自動替換縮圖
|
||
$(".w-ba-banner").each(function() {
|
||
const $banner = $(this);
|
||
const slides = $banner.find(".w-ad-banner__slide iframe");
|
||
const pagerItems = $banner.find(".w-ba-banner__caption li img");
|
||
|
||
slides.each(function(i, iframe) {
|
||
const src = $(iframe).attr("src");
|
||
const match = src.match(/embed\/([^?]+)/);
|
||
if (match && pagerItems[i]) {
|
||
const videoId = match[1];
|
||
pagerItems[i].src = `https://img.youtube.com/vi/${videoId}/hqdefault.jpg`;
|
||
pagerItems[i].alt = "YouTube thumbnail";
|
||
}
|
||
});
|
||
});
|
||
});
|
||
$(document).ready(function(){
|
||
$('.w-ad-banner').each(function(){
|
||
var $banner = $(this);
|
||
var $wrap = $banner.find('.w-ad-banner__wrap');
|
||
var $pager = $banner.find('.banner-pager');
|
||
var $btnNext = $banner.find('.pager-next');
|
||
var $btnPrev = $banner.find('.pager-prev');
|
||
var liWidth = $pager.find('li').outerWidth(true); // li 寬度含 margin
|
||
var visibleCount = 4; // 一次顯示四個
|
||
|
||
// 更新按鈕顯示狀態
|
||
function updatePagerButtons() {
|
||
var scrollLeft = $pager.scrollLeft();
|
||
var maxScrollLeft = $pager[0].scrollWidth - $pager.outerWidth();
|
||
|
||
if(scrollLeft <= 0){
|
||
$btnPrev.hide();
|
||
} else {
|
||
$btnPrev.show();
|
||
}
|
||
|
||
if(scrollLeft >= maxScrollLeft){
|
||
$btnNext.hide();
|
||
} else {
|
||
$btnNext.show();
|
||
}
|
||
}
|
||
|
||
// 左右按鈕控制 banner-pager
|
||
$btnNext.click(function(e){
|
||
e.preventDefault();
|
||
var scrollLeft = $pager.scrollLeft();
|
||
$pager.animate({scrollLeft: scrollLeft + liWidth * visibleCount}, 300, updatePagerButtons);
|
||
});
|
||
|
||
$btnPrev.click(function(e){
|
||
e.preventDefault();
|
||
var scrollLeft = $pager.scrollLeft();
|
||
$pager.animate({scrollLeft: scrollLeft - liWidth * visibleCount}, 300, updatePagerButtons);
|
||
});
|
||
|
||
// 當輪播 slide 改變時，自動滾動 pager
|
||
$wrap.on('cycle-after', function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag){
|
||
var index = $(incomingSlideEl).index();
|
||
var scrollLeft = liWidth * index;
|
||
$pager.animate({scrollLeft: scrollLeft}, 300, updatePagerButtons);
|
||
});
|
||
|
||
// 初始化時把 pager scroll 到 active-slide，並更新按鈕
|
||
var initialIndex = $wrap.find('.w-ad-banner__slide.cycle-slide-active').index();
|
||
$pager.scrollLeft(initialIndex * liWidth);
|
||
updatePagerButtons(); // 初始化按鈕狀態
|
||
|
||
// -------- 手勢滑動功能 (平板 / 手機) --------
|
||
let startX, scrollStart;
|
||
$pager.on('touchstart', function(e){
|
||
startX = e.originalEvent.touches[0].pageX;
|
||
scrollStart = $pager.scrollLeft();
|
||
});
|
||
$pager.on('touchmove', function(e){
|
||
const x = e.originalEvent.touches[0].pageX;
|
||
const delta = startX - x;
|
||
$pager.scrollLeft(scrollStart + delta);
|
||
updatePagerButtons();
|
||
e.preventDefault(); // 阻止頁面跟著滾動
|
||
});
|
||
|
||
});
|
||
});
|
||
|
||
|
||
$(document).ready(function() {
|
||
// 選擇這個 banner 的 caption 和 slides
|
||
var $captionLis = $('.banner_caption_68b6d32c085777de2862c574 li');
|
||
var $slides = $('.w-ba-banner__wrap .w-ad-banner__slide');
|
||
|
||
// 確保數量一致
|
||
$captionLis.each(function(index) {
|
||
var $li = $(this);
|
||
var $slide = $slides.eq(index);
|
||
var captionText = $slide.find('.w-ad-banner__caption_text').text().trim();
|
||
|
||
// 將文字放入 li，這裡放在 li 裡新增一個 <span>
|
||
if(captionText){
|
||
$li.append('<span class="caption-text">' + captionText + '</span>');
|
||
}
|
||
});
|
||
});
|
||
|
||
|
||
|
||
|
||
</script>
|
||
<style type="text/css">
|
||
|
||
|
||
.jarallax-video-audio, .jarallax-video-control-play{
|
||
z-index: 201;
|
||
font-size: 2em;
|
||
color: #FFF;
|
||
text-align: center;
|
||
position: absolute;
|
||
top: 2%;
|
||
right: 2%;
|
||
height: 66px;
|
||
width: 66px;
|
||
border-radius: 50%;
|
||
line-height: 1.8;
|
||
cursor: pointer;
|
||
border: 2px solid rgba(255,255,255,.6);
|
||
background-color: rgba(0,0,0,.6);
|
||
transition: all 1.2s ease;
|
||
}
|
||
.jarallax-video-control-play{
|
||
margin-top: 66px;
|
||
}
|
||
@media (max-width: 768px){
|
||
.jarallax-video-audio, .jarallax-video-control-play{
|
||
top: 50%;
|
||
}
|
||
.jarallax-video-audio.accessibility_mode_btn{
|
||
margin-top: -33px;
|
||
}
|
||
.jarallax-video-control-play{
|
||
margin-top: 33px;
|
||
}
|
||
}
|
||
.jarallax-video-audio:hover,.jarallax-video-audio:focus,.jarallax-video-control-play:hover,.jarallax-video-control-play:focus {
|
||
color: #FFC500;
|
||
transition: all 0.6s ease;
|
||
}
|
||
|
||
.w-ba-banner .controlplay .resume-slide.active i{
|
||
color: #32D9C3;
|
||
}
|
||
.w-ba-banner .controlplay .pause-slide.active i{
|
||
color: #ff4500;
|
||
}
|
||
.w-ba-banner .controlplay{
|
||
width: auto;
|
||
}
|
||
.next-button,.prev-button{
|
||
cursor: pointer;
|
||
}
|
||
</style>
|