Upload banner templates.
This commit is contained in:
parent
afd6ff8612
commit
0482fd055d
|
|
@ -0,0 +1,174 @@
|
|||
|
||||
<div class="widget-link widget-3" style="position: relative;">
|
||||
<div class="widget-link__more-wrap clearfix">
|
||||
<h2 class="widget-link__widget-title">
|
||||
<span>{{widget-title}}</span>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<ul class="widget-link__list row" data-level="0" data-list="web_link" style="position:relative; z-index: 3">
|
||||
<li class="widget-link__item col-md-3">
|
||||
<div class="liWrapper">
|
||||
<img class="widget-link__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div style="position: absolute;top: 55%;bottom: 50%;width:100%;">
|
||||
<button class="btn-left" title = "<%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %>" style="float: left;height: 2.5em; width: 2.5em;background: url(/assets/link-left.png) no-repeat;border: 0;background-size: contain;position: absolute;transition:.3s; left: -1%;"></button>
|
||||
<button class="btn-right" title = "<%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %>" style="float: right;;height: 2.5em; width: 2.5em;background: url(/assets/link-right.png) no-repeat;background-size: contain;border: 0;position: absolute;transition:.3s;right: -2%;"></button>
|
||||
</div>
|
||||
<a class="widget-link__more btn" href="{{more_url}}"><%= t("web_link.more") %></a>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
ul.widget-link__list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.widget-3 li {
|
||||
background-color: #fff;
|
||||
padding: 3px;
|
||||
min-height: 97px;
|
||||
max-height: 97px;
|
||||
}
|
||||
.widget-link__more {
|
||||
background-color: #811515;
|
||||
font-size: 1.4em;
|
||||
color: white !important;
|
||||
display: block;
|
||||
width: 200px;
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
bottom: 8px;
|
||||
margin: 50px auto 0 auto !important;
|
||||
padding: 15px 10px;
|
||||
}
|
||||
.widget-link__more:hover {
|
||||
background-color: #6b1111;
|
||||
}
|
||||
</style>
|
||||
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
|
||||
<script>
|
||||
function combineul_{{subpart-id}}(){
|
||||
var parents = $('[data-subpart-id=\"{{subpart-id}}\"] ul.widget-link__list').parent();
|
||||
parents.each(function(i,v){
|
||||
for(var i=1;i<$(v).find('ul.widget-link__list').length;i++)
|
||||
$(v).find('ul.widget-link__list').eq(0).find('>li').eq(-1).after($(v).find('ul.widget-link__list').eq(i).html());
|
||||
var ullength = $(v).find('ul.widget-link__list').length;
|
||||
for(var i = 1;i < ullength;i++)
|
||||
$(v).find('ul.widget-link__list').eq(-1).remove();
|
||||
})
|
||||
};
|
||||
var num;
|
||||
var lilength = $('[data-subpart-id=\"{{subpart-id}}\"] li.widget-link__item').length;
|
||||
function reorganize_{{subpart-id}}(num){
|
||||
var uls = $('[data-subpart-id=\"{{subpart-id}}\"] ul.widget-link__list').toArray();
|
||||
var currentul = uls.findIndex(function(v){
|
||||
return $(v).hasClass("active") && !$(v).hasClass("hidden_item");
|
||||
})
|
||||
if(currentul == -1)
|
||||
currentul = 0;
|
||||
var li_active_idx = 0;
|
||||
if(currentul != 0)
|
||||
li_active_idx = $(uls[currentul]).find("li.widget-link__item").eq(0).index("li.widget-link__item");
|
||||
combineul_{{subpart-id}}();
|
||||
var parents = $('[data-subpart-id=\"{{subpart-id}}\"] ul.widget-link__list').parent();
|
||||
parents.each(function(i,v){
|
||||
var lilength = $(v).find('li.widget-link__item').length;
|
||||
var ul_length = Math.ceil(lilength/num);
|
||||
for(var ii=1;ii< ul_length;ii++){
|
||||
var clone_ul = $(v).find('ul.widget-link__list').eq(-1).clone();
|
||||
clone_ul.empty();
|
||||
clone_ul.removeClass("active");
|
||||
clone_ul.css("display","");
|
||||
$(v).find('ul.widget-link__list').eq(-1).after(clone_ul.prop("outerHTML"));
|
||||
var lihtml="";
|
||||
if(ii != (ul_length-1)){
|
||||
for(var j=0;j<num;j++){
|
||||
lihtml += $(v).find('li.widget-link__item').eq(ii*num+j).prop("outerHTML");
|
||||
};
|
||||
}else{
|
||||
for(var j=0;j< lilength - num *(ul_length-1) ;j++){
|
||||
lihtml += $(v).find('li.widget-link__item').eq(ii*num+j).prop("outerHTML");
|
||||
};
|
||||
};
|
||||
$(v).find('ul.widget-link__list').eq(-1).html(lihtml);
|
||||
}
|
||||
if(ul_length != 1 )
|
||||
for(var i=0;i< lilength -num ; i++)
|
||||
$(v).find('ul.widget-link__list').eq(0).find("li.widget-link__item").eq(num).remove();
|
||||
})
|
||||
$('[data-subpart-id=\"{{subpart-id}}\"] ul.widget-link__list').css("display","none");
|
||||
$('[data-subpart-id=\"{{subpart-id}}\"] ul.widget-link__list').css('padding','0 1.125em');
|
||||
$('[data-subpart-id=\"{{subpart-id}}\"] button').css('z-index','10');
|
||||
$('[data-subpart-id=\"{{subpart-id}}\"] ul.widget-link__list >li').css('width','calc('+100/num+'% - '+20/16+'em)'); //20px=>li的margin
|
||||
//$('[data-subpart-id=\"{{subpart-id}}\"] ul.widget-link__list >li').css('float','left');
|
||||
var active_ul = $("[data-subpart-id=\"{{subpart-id}}\"] li.widget-link__item").eq(li_active_idx).parents("ul.widget-link__list");
|
||||
active_ul.addClass("active");
|
||||
active_ul.removeClass("hidden_item");
|
||||
active_ul.css("display","");
|
||||
};
|
||||
$(window).resize(function(){
|
||||
if($(window).width()>1024){
|
||||
reorganize_{{subpart-id}}(4);
|
||||
num=4;
|
||||
}else if($(window).width()>576){
|
||||
reorganize_{{subpart-id}}(2);
|
||||
num=2;
|
||||
}else{
|
||||
reorganize_{{subpart-id}}(1);
|
||||
num=1;
|
||||
}
|
||||
})
|
||||
$(document).ready(function(){
|
||||
if($(window).width()>1024){
|
||||
reorganize_{{subpart-id}}(4);
|
||||
num=4;
|
||||
}else if($(window).width()>576){
|
||||
reorganize_{{subpart-id}}(2);
|
||||
num=2;
|
||||
}else{
|
||||
reorganize_{{subpart-id}}(1);
|
||||
num=1;
|
||||
}
|
||||
var flag=false;
|
||||
$('.btn-left').click(function(){
|
||||
if(!flag){
|
||||
var uls = $('[data-subpart-id=\"{{subpart-id}}\"] ul.widget-link__list:not(.hidden_item)').toArray();
|
||||
var ul_length = uls.length;
|
||||
var currentul = uls.findIndex(function(v){
|
||||
return $(v).hasClass("active");
|
||||
})
|
||||
$('[data-subpart-id=\"{{subpart-id}}\"] ul.widget-link__list').css('display','none');
|
||||
if(currentul - 1 < 0)
|
||||
currentul += ul_length;
|
||||
$('[data-subpart-id=\"{{subpart-id}}\"] ul.widget-link__list:not(.hidden_item)').removeClass("active");
|
||||
var active_item = $(uls[currentul-1]);
|
||||
active_item.addClass("active");
|
||||
active_item.find("li").css("display","block");
|
||||
flag=true;
|
||||
$('[data-subpart-id=\"{{subpart-id}}\"] ul.widget-link__list.active').eq(0).effect("slide", { direction: "left", mode: 'show', duration: 500},function(){flag=false;});
|
||||
};
|
||||
});
|
||||
$('.btn-right').click(function(){
|
||||
var lilength = $('[data-subpart-id=\"{{subpart-id}}\"] li.widget-link__item').length;
|
||||
if(!flag){
|
||||
var uls = $('[data-subpart-id=\"{{subpart-id}}\"] ul.widget-link__list:not(.hidden_item)').toArray();
|
||||
var ul_length = uls.length;
|
||||
var currentul = uls.findIndex(function(v){
|
||||
return $(v).hasClass("active");
|
||||
})
|
||||
$('[data-subpart-id=\"{{subpart-id}}\"] ul.widget-link__list').css('display','none');
|
||||
if(currentul + 1 > ul_length - 1)
|
||||
currentul -= ul_length;
|
||||
$('[data-subpart-id=\"{{subpart-id}}\"] ul.widget-link__list:not(.hidden_item)').removeClass("active");
|
||||
var active_item = $(uls[currentul+1]);
|
||||
active_item.addClass("active");
|
||||
active_item.find("li").css("display","block");
|
||||
flag=true;
|
||||
$('[data-subpart-id=\"{{subpart-id}}\"] ul.widget-link__list.active').eq(0).effect("slide", { direction: "left", mode: 'show', duration: 500},function(){flag=false;});
|
||||
};
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<div class="widget-link widget-4">
|
||||
<div class="widget-link__more-wrap clearfix">
|
||||
<h2 class="widget-link__widget-title">
|
||||
<span>{{widget-title}}</span>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="widget-link_wrapper">
|
||||
<div class="cycle-slideshow widget-content" style="margin: 0em 3.125em;"
|
||||
data-level="0" data-list="web_link" data-cycle-slides="> li"
|
||||
data-cycle-fx="carousel" data-cycle-timeout="0" data-cycle-carousel-visible="4" data-cycle-pause-on-hover="true" data-cycle-log="false" data-cycle-carousel-fluid="true">
|
||||
<li class="widget-link__item">
|
||||
<div class="liWrapper">
|
||||
<img class="widget-link__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
$('[data-subpart-id="{{subpart-id}}"] .next-button').click(function(){
|
||||
$(this).parent("ul").siblings('.widget-content').cycle("next");
|
||||
})
|
||||
$('[data-subpart-id="{{subpart-id}}"] .prev-button').click(function(){
|
||||
$(this).parent("ul").siblings('.widget-content').cycle("prev");
|
||||
})
|
||||
</script>
|
||||
<style type="text/css">
|
||||
.widget-link_wrapper{
|
||||
position: relative;
|
||||
}
|
||||
.widget-link.widget-4 .button-mid{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.widget-link.widget-4 .button-mid .fa{
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<div class="widget-link widget-5">
|
||||
<div class="widget-link__more-wrap clearfix">
|
||||
<h2 class="widget-link__widget-title">
|
||||
<span>{{widget-title}}</span>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="widget-link_wrapper">
|
||||
<div class="cycle-slideshow widget-content" style="margin: 0em 3.125em;"
|
||||
data-level="0" data-list="web_link" data-cycle-slides="> li"
|
||||
data-cycle-fx="carousel" data-cycle-timeout="0" data-cycle-carousel-visible="5" data-cycle-pause-on-hover="true" data-cycle-log="false" data-cycle-carousel-fluid="true">
|
||||
<li class="widget-link__item">
|
||||
<div class="liWrapper">
|
||||
<a class="widget-content-title" href="{{link_to_show}}" target="_blank" title="{{title_text}}">
|
||||
<img class="widget-link__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}"><br />
|
||||
{{title}}
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
$('[data-subpart-id="{{subpart-id}}"] .next-button').click(function(){
|
||||
$(this).parent("ul").siblings('.widget-content').cycle("next");
|
||||
})
|
||||
$('[data-subpart-id="{{subpart-id}}"] .prev-button').click(function(){
|
||||
$(this).parent("ul").siblings('.widget-content').cycle("prev");
|
||||
})
|
||||
</script>
|
||||
<style type="text/css">
|
||||
.widget-link_wrapper{
|
||||
position: relative;
|
||||
}
|
||||
.widget-link.widget-5 .button-mid{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.widget-link.widget-5 .button-mid .fa{
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -33,6 +33,30 @@
|
|||
"en" : "2. Horizontal List (widget-title, link)"
|
||||
},
|
||||
"thumbnail" : "thumb.png"
|
||||
},
|
||||
{
|
||||
"filename" : "web_res_widget3",
|
||||
"name" : {
|
||||
"zh_tw" : "3. 輪播1(slide)",
|
||||
"en" : "3. Banner 1(slide)"
|
||||
},
|
||||
"thumbnail" : "thumb.png"
|
||||
},
|
||||
{
|
||||
"filename" : "web_res_widget4",
|
||||
"name" : {
|
||||
"zh_tw" : "4. 輪播2(carousel 4)",
|
||||
"en" : "4. Banner 2(carousel 4)"
|
||||
},
|
||||
"thumbnail" : "thumb.png"
|
||||
},
|
||||
{
|
||||
"filename" : "web_res_widget5",
|
||||
"name" : {
|
||||
"zh_tw" : "5. 輪播3(carousel 5)",
|
||||
"en" : "5. Banner 3(carousel 5)"
|
||||
},
|
||||
"thumbnail" : "thumb.png"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue