add adbanner widget 5
This commit is contained in:
parent
fafdccdd61
commit
5b1183f66b
|
|
@ -131,28 +131,23 @@
|
|||
}
|
||||
|
||||
ul.button-mid{
|
||||
width: 100%;
|
||||
top: 50%;
|
||||
position: absolute;
|
||||
padding: 0;
|
||||
margin-top: 0;
|
||||
margin: 0;
|
||||
transform: translateY(-50%);
|
||||
z-index: 999;
|
||||
|
||||
.prev-button{
|
||||
transition: 0.4s;
|
||||
position: relative;
|
||||
float:left;
|
||||
left: 0.5rem;
|
||||
width: 2.5rem;
|
||||
/* background: url(/assets/next.png) no-repeat center; */
|
||||
height: 2.5rem;
|
||||
font-size: 2.2rem;
|
||||
color: #ffffff;
|
||||
background: rgba(0,0,0,0.2);
|
||||
text-align: center;
|
||||
line-height: 2.5rem;
|
||||
top: 50%;
|
||||
position: absolute;
|
||||
transform: translateY(-50%);
|
||||
z-index: 999;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0,0,0,0.1);
|
||||
}
|
||||
|
|
@ -169,13 +164,17 @@ ul.button-mid{
|
|||
position: relative;
|
||||
right: 0.5rem;
|
||||
width: 2.5rem;
|
||||
/* background: url(/assets/next.png) no-repeat center; */
|
||||
height: 2.5rem;
|
||||
font-size: 2.2rem;
|
||||
color: $theme-white;
|
||||
background: rgba(0,0,0,0.2);
|
||||
text-align: center;
|
||||
line-height: 2.5rem;
|
||||
top: 50%;
|
||||
position: absolute;
|
||||
transform: translateY(-50%);
|
||||
z-index: 999;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0,0,0,0.1);
|
||||
}
|
||||
|
|
@ -282,4 +281,61 @@ ul.button-mid{
|
|||
.cycle-slide-active {
|
||||
z-index: 101 !important;
|
||||
}
|
||||
}
|
||||
|
||||
//Widget 5
|
||||
.ba-banner-widget-5 {
|
||||
background: url(/assets/BANNER-BG-01.jpg) 0 0 no-repeat;
|
||||
.slide-img { padding: 1rem 1.5rem; }
|
||||
.slide-content {
|
||||
z-index: 200;
|
||||
font-family: $main-font;
|
||||
padding-top: 0.5rem;
|
||||
padding-left: 0;
|
||||
|
||||
h3 {
|
||||
font-size: 1rem;
|
||||
margin: 0.5em 0;
|
||||
color: #12517a;
|
||||
}
|
||||
|
||||
div {
|
||||
white-space: normal;
|
||||
word-break: break-all;
|
||||
font-size: 1rem;
|
||||
color: #373634;
|
||||
padding: 0 2em 0.5em 0;
|
||||
}
|
||||
}
|
||||
.controlplay { display: none; }
|
||||
.banner-pager {
|
||||
right: 1rem;
|
||||
top: 0;
|
||||
width: unset;
|
||||
li { height: unset; width: unset; }
|
||||
a { background: #a0d2f3;}
|
||||
}
|
||||
|
||||
@media(max-width: $screen-sm) {
|
||||
.slide-content {
|
||||
padding: 0.5em 1em;
|
||||
position: relative;
|
||||
background: #a0d2f3;
|
||||
h3 { font-size: 1em; }
|
||||
div { font-size: 0.75em; }
|
||||
}
|
||||
.controlplay {
|
||||
right: 0;
|
||||
a { padding: 0 5px;}
|
||||
a i { font-size: 0.75em; }
|
||||
}
|
||||
}
|
||||
@media(max-width: $screen-sm -1) {
|
||||
ul.button-mid.next-button, ul.button-mid.prev-button{
|
||||
top: 35%;
|
||||
transform: translateY(-35%);
|
||||
}
|
||||
.slide-content h3, .slide-content div { color: $theme-white; }
|
||||
.w-ba-banner__wrap { overflow: visible;}
|
||||
}
|
||||
}
|
||||
|
|
@ -33,6 +33,11 @@
|
|||
.response-container {
|
||||
position: relative;
|
||||
|
||||
@media (min-width: $screen-xs) {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media (min-width: $screen-sm) {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,59 @@
|
|||
<div class="w-ba-banner ba-banner-widget-5">
|
||||
<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-cycle-auto-height="{{base_image}}"
|
||||
data-cycle-speed="{{speed}}"
|
||||
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-active-class="active-slide"
|
||||
data-cycle-swipe=true
|
||||
data-cycle-swipe-fx="scrollHorz"
|
||||
>
|
||||
<div class="w-ba-banner__slide {{class}}"
|
||||
data-link="{{link}}"
|
||||
data-cycle-title="{{title}}"
|
||||
data-cycle-desc="{{context}}"
|
||||
data-target="{{target}}"
|
||||
>
|
||||
<div class="slide-img col-md-4 col-sm-4">
|
||||
<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 class="slide-content col-md-8 col-sm-8">
|
||||
<a href="{{link}}" target="{{target}}" title="{{alt_title}}"><h3>{{title}}</h3></a>
|
||||
<div>{{context}}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-ba-banner__caption banner-pager banner_caption_{{subpart-id}}"></div>
|
||||
<ul class="controlplay"><a class="resume-slide" 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>
|
||||
<script>
|
||||
var flag = 1;
|
||||
$('.pause-slide').click(function(){
|
||||
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('pause');
|
||||
});
|
||||
$('.resume-slide').click(function(){
|
||||
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('resume');
|
||||
});
|
||||
$('.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>
|
||||
|
|
@ -39,7 +39,14 @@
|
|||
"en" : "4. Pro Carousel ( image, Youtube video, navigation )"
|
||||
},
|
||||
"thumbnail" : "thumb.png"
|
||||
},
|
||||
{
|
||||
"filename" : "ad_banner_widget5",
|
||||
"name" : {
|
||||
"zh_tw" : "5. 橫幅文字輪播 ( 圖片, 文字區域, 導航圖示 )",
|
||||
"en" : "5. Carousel ( image, title, description, navigation )"
|
||||
},
|
||||
"thumbnail" : "thumb.png"
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
Loading…
Reference in New Issue