adbanner-test/modules/ad_banner/_ad_banner_widget1.html.erb

80 lines
3.5 KiB
Plaintext
Raw Normal View History

2021-09-02 02:40:58 +00:00
<div class="w-ad-banner w-ba-banner ad-banner-widget-1 ba-banner-widget-1">
<div class="w-ad-banner__wrap w-ba-banner__wrap cycle-slideshow"
2021-04-10 15:16:17 +00:00
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}}"
2021-06-18 02:03:21 +00:00
data-pager-template=""
2021-04-10 15:16:17 +00:00
data-pager-active-class="active-slide"
data-cycle-swipe=true
data-cycle-swipe-fx="scrollHorz"
>
2021-08-25 08:54:12 +00:00
<div class="w-ad-banner__slide w-ba-banner__slide {{class}}"
2021-04-10 15:16:17 +00:00
data-link="{{link}}"
data-cycle-title="{{title}}"
data-cycle-desc="{{context}}"
data-overlay-template="<h3>{{title}}</h3><p>{{desc}}</p>"
data-target="{{target}}"
>
<a href="{{link}}" target="{{target}}" title="{{alt_title}}">
2021-09-02 02:40:58 +00:00
<img class="w-ad-banner__image w-ba-banner__image banner-responsive" src="{{image_link}}" alt="{{alt_title}}">
2021-04-10 15:16:17 +00:00
</a>
</div>
</div>
2021-09-02 02:40:58 +00:00
<div class="w-ad-banner__caption ad-overlay w-ba-banner__caption w-ad-banner__caption w-ad-banner__overlay_{{subpart-id}}"></div>
2022-07-03 07:49:30 +00:00
<div class="w-ad-banner__pager-1 w-ba-banner__caption banner-pager banner_caption_{{subpart-id}}" data-list="images" data-level="0">
<li><button title="Slide {{slide_number}}"><span style="display: none;">Slide {{slide_number}}</span></button></li>
</div>
2022-08-08 08:10:10 +00:00
<ul class="controlplay"><a href="javascript:;" class="resume-slide active" title="<%= I18n.t("ad_banner.resume") %>"><i aria-hidden="true" aria-label="<%= I18n.t("ad_banner.resume") %>"></i><p style="display: none;"><%= I18n.t("ad_banner.resume") %></p></a><a href="javascript:;" class="pause-slide" title="<%= I18n.t("ad_banner.pause") %>"><i aria-hidden="true" aria-label="<%= I18n.t("ad_banner.pause") %>"></i><p style="display: none;"><%= I18n.t("ad_banner.pause") %></p></a></ul>
2021-04-10 15:16:17 +00:00
<ul class="button-mid">
2022-02-16 08:45:55 +00:00
<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>
2021-04-10 15:16:17 +00:00
</ul>
</div>
<script>
2022-06-14 02:41:44 +00:00
$('[data-subpart-id="{{subpart-id}}"] .pause-slide').click(function(){
2021-04-10 15:16:17 +00:00
$(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')
});
2022-06-14 02:41:44 +00:00
$('[data-subpart-id="{{subpart-id}}"] .resume-slide').click(function(){
2021-04-10 15:16:17 +00:00
$(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')
});
2022-06-14 02:41:44 +00:00
$('[data-subpart-id="{{subpart-id}}"] .next-button').click(function(){
2021-04-10 15:16:17 +00:00
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("next");
})
2022-06-14 02:41:44 +00:00
$('[data-subpart-id="{{subpart-id}}"] .prev-button').click(function(){
2021-04-10 15:16:17 +00:00
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("prev");
})
</script>
<style type="text/css">
2021-08-31 09:31:24 +00:00
.w-ba-banner .controlplay .resume-slide.active i{
2021-04-10 15:16:17 +00:00
color: #32D9C3;
}
2021-08-31 09:31:24 +00:00
.w-ba-banner .controlplay .pause-slide.active i{
2021-04-10 15:16:17 +00:00
color: #ff4500;
}
2021-08-31 09:31:24 +00:00
.w-ba-banner .controlplay{
width: auto;
}
.w-ba-banner .button-mid{
position: absolute;
width: 100%;
height: 100%;
2021-09-02 02:59:37 +00:00
top: 0;
left: 0;
2021-08-31 09:31:24 +00:00
}
.next-button,.prev-button{
cursor: pointer;
}
2021-04-10 15:16:17 +00:00
</style>