112 lines
4.5 KiB
Plaintext
112 lines
4.5 KiB
Plaintext
|
<div class="w-ba-banner ba-banner-widget-1 ba-banner-widget-youtube">
|
||
|
|
<div class="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="{{base_image}}"
|
||
|
|
data-cycle-speed="{{speed}}"
|
||
|
|
data-cycle-timeout="{{timeout}}"
|
||
|
|
data-cycle-fx="{{ad_fx}}"
|
||
|
|
data-pager=".banner_caption_{{subpart-id}}"
|
||
|
|
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-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>
|
||
|
|
<div class="w-ba-banner__caption banner-pager banner_caption_{{subpart-id}}"></div>
|
||
|
|
<ul class="controlplay"><a class="resume-slide active" title = "<%= (I18n.locale.to_s =="zh_tw") ? "繼續播放" : "resume" %>"><i></i></a><a class="pause-slide" title = "<%= (I18n.locale.to_s =="zh_tw") ? "暫停播放" : "pause"%>"><i></i></a></ul>
|
||
|
|
<ul class="button-mid">
|
||
|
|
<i class="fa fa-angle-left prev-button" aria-hidden="true" title = "<%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %>"></i>
|
||
|
|
<i class="fa fa-angle-right next-button" aria-hidden="true" title = "<%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %>"></i>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script type="text/javascript">
|
||
|
|
if (typeof ad_banners_count === 'undefined'){
|
||
|
|
var ad_banners_count = 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
|
||
|
|
$("document").ready(function(){
|
||
|
|
$("*[data-yt-binded=0]").each(function(){
|
||
|
|
$(this).attr("data-yt-binded","1");
|
||
|
|
var obj = $(this).find("iframe");
|
||
|
|
obj.attr("id",$(this).data("youtube-id") + "_" + ad_banners_count);
|
||
|
|
ad_banners_count++;
|
||
|
|
})
|
||
|
|
});
|
||
|
|
|
||
|
|
if (typeof onYouTubeIframeAPIReady !== 'function'){
|
||
|
|
function onYouTubeIframeAPIReady(){
|
||
|
|
$(".w-ba-banner iframe[data-yt-api-binded=0]").each(function(){
|
||
|
|
$(this).attr("data-yt-api-binded","1");
|
||
|
|
new YT.Player($(this).attr("id"), {
|
||
|
|
events: {
|
||
|
|
'onStateChange': onPlayerStateChange
|
||
|
|
}
|
||
|
|
});
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
function onPlayerStateChange(event){
|
||
|
|
var iframe = $(event.target.h),
|
||
|
|
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.cycle("pause");
|
||
|
|
widget.find('.banner-pager,.controlplay,.button-mid,.ad-overlay').css('visibility','hidden')
|
||
|
|
}else if(event.data == YT.PlayerState.PAUSED || event.data == YT.PlayerState.ENDED){
|
||
|
|
cyclediv.cycle("resume");
|
||
|
|
widget.find('.banner-pager,.controlplay,.button-mid,.ad-overlay').css('visibility','')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
$(document).ready(function(){
|
||
|
|
window.onYouTubePlayerAPIReady = function() {
|
||
|
|
onYouTubeIframeAPIReady();
|
||
|
|
};
|
||
|
|
$('.pause-slide').off('click').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')
|
||
|
|
});
|
||
|
|
$('.resume-slide').off('click').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')
|
||
|
|
});
|
||
|
|
$('.next-button').off('click').on('click',function(){
|
||
|
|
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("next");
|
||
|
|
})
|
||
|
|
$('.prev-button').off('click').on('click',function(){
|
||
|
|
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("prev");
|
||
|
|
})
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style type="text/css">
|
||
|
|
.controlplay .resume-slide.active i{
|
||
|
|
color: #32D9C3;
|
||
|
|
}
|
||
|
|
.controlplay .pause-slide.active i{
|
||
|
|
color: #ff4500;
|
||
|
|
}
|
||
|
|
</style>
|