Untitled
unknown
plain_text
2 years ago
39 kB
4
Indexable
<style>
.mySwiper.swiper .swiper-slide {
max-width: inherit !important;
width: 100% !important;
}
.swiper-slide {
opacity: 1;
}
.mySwiper .swiper-slide .top-banner .content .image-wrapper {
background-color: #000;
max-width: 87.5rem;
left: 0;
right: 0;
margin-right: auto;
margin-left: auto;
overflow: hidden;
width: 100%;
}
.mySwiper .swiper-wrapper .swiper-slide .top-banner .content .image-wrapper .Half-degraded {
background: linear-gradient(90deg,#000 0,rgba(0,0,0,0));
opacity: .7;
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 50%;
height: 100%;
}
.mySwiper .swiper-wrapper .swiper-slide {
max-width: inherit;
}
.mySwiper .swiper-wrapper .swiper-slide {
margin: 0;
padding: 0;
opacity: 1;
}
.mySwiper .swiper-wrapper .swiper-slide .top-banner {
position: relative;
background-color: rgba(0,0,0,0)!important;
width: 100%;
}
.mySwiper .swiper-wrapper .swiper-slide .top-banner .row .wrapper p {
color: #fff;
text-align: left;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}
.mySwiper .swiper-wrapper .swiper-slide .top-banner .content nav ~ p {
margin-top: 1.875rem;
font-size: 1rem;
line-height: 1.625rem;
max-width: 32.5rem;
}
.mySwiper .swiper-wrapper .swiper-slide .top-banner .row .wrapper img.image-brand {
/* margin-top: 0; */
/* margin-bottom: 0.625rem; */
max-height: 6.75rem;
width: auto;
align-self: flex-start;
}
.collections .mySwiper .top-banner{
height: 100% !important;
}
.episodes-slider .swiper-slide {
text-align: center;
font-size: 1.125rem;
color: #2d6eff;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0.625rem 0.9375rem 1.0.75rem rgba(0,0,0,.3);
margin-top: 2rem;
margin-bottom: 2.5rem;
/* opacity: .05; */
transition: all .3s ease-in-out;
max-width: 25.625rem;
}
html body .swiper.episodes .swiper-slide .card .card-content .card-content-inside .description .actions.bottom a.play-now span.play-animation{
margin-left: 0px;
max-width: max-content;
}
.mySwiper .title h1 {
font-size: 2.6875rem !important;
margin-top: 3rem !important;
margin-bottom: 2rem !important;
}
html body .mySwiper .actions .play-now{
padding: 14px 31px !important;
border-radius: 4px !important;
background-color: #2d6eff;
color: #fff;
display: inline-block !important;
}
html body .mySwiper .actions .play-now:hover,
html body .mySwiper .actions .play-now:focus{
background-color: #004fff;
}
@media screen and (min-width:768px) {
html body .mySwiper .row.into-swiper {
top: -2.5rem;
}
}
html body .mySwiper .row.into-swiper {
position: relative;
text-align: right;
display: block !important;
}
html body .mySwiper.swiper-top .swiper-pagination .swiper-pagination-bullet{
width: 0.9375rem;
height: 0.9375rem;
border: 0.125rem solid #fff;
background: #000;
display: block;
outline: 0;
border-radius: 50%;
text-indent: -999em;
transition: all .3s ease;
margin: 0px 25px 0px 0px !important;
top: 1px;
}
html body .mySwiper span.swiper-pagination-bullet.swiper-pagination-bullet-active {
background: #fff !important;
}
html body .mySwiper .swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets {
position: relative;
width: auto;
display: inline-flex;
height: auto;
}
html body .mySwiper .swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets:after {
display: block;
content: "";
position: absolute;
top: calc(50%);
left: 0;
width: 100%;
height: 0.125rem;
background-color: #fff;
z-index: -1;
}
html body .mySwiper.swiper-top .swiper-pagination .swiper-pagination-bullet:after{
background: transparent !important;
}
html body .mySwiper.swiper-top .swiper-pagination .swiper-pagination-bullet:last-child {
margin-right: 0px !important;
}
html body .mySwiper .top-banner .content nav ul {
margin-top: 20px !important;
}
@media screen and (max-width:350px) {
html body .mySwiper.swiper .actions .play-now{
padding: 14px!important;
text-align: center;
}
}
@media screen and (max-width:767px) {
.eg-slider .swiper-button-next:not(.swiper-button-disabled),
.eg-slider .swiper-button-prev:not(.swiper-button-disabled),
.eg-slider .swiper-button-next[aria-disabled="false"],
.eg-slider .swiper-button-prev[aria-disabled="false"] {
opacity: 1;
width: 35px;
height: 35px;
background-color: #2a2929d9;
background-size: 18px;
border-radius: 100%;
display: block !important;
}
/* html body .mySwiper .row.into-swiper {
display: none;
} */
html body .main-content.programmes .top-area .breadcrumbs{
display: none;
}
html body .mySwiper .actions {
margin-bottom:40px;
}
html body .top-banner .content .actions {
margin-bottom: 0px;
}
html body .collections .swiper-top .swiper-container .swiper-slide .top-banner p {
min-height: 104px;
}
html body .mySwiper .swiper-wrapper .swiper-slide .top-banner .content .image-wrapper .Half-degraded {
background: linear-gradient(0deg,#000 0,rgba(0,0,0,0));
opacity: .7;
position: absolute;
z-index: 1;
top: auto;
left: 0;
width: 100%;
height: 42%;
bottom: 0px;
}
html body .mySwiper .swiper-wrapper .swiper-slide .top-banner {
background: #000000 !important;
padding-bottom: 50px;
}
.collections .collection[data-name-component=GridProgramme] > .row:nth-child(2) {
background: #1b3841;
margin-bottom: 28px;
}
html body .collections .alphabeth {
position: static;
flex-direction: row;
height: 52px;
overflow-x: scroll;
margin-bottom: 0px;
}
html body .collections .alphabeth a {
margin: 0px;
height: fit-content;
font-size: 22px;
padding: 10px 15px;
}
html body .collections .alphabeth a:not(.active){
opacity: .4;
}
html body .collections .collection[data-name-component=GridProgramme] .row.wrapper-items {
justify-content: center;
}
html body .mySwiper .swiper-slide .top-banner .content .image-wrapper {
background-image: url('https://www.britbox.com/Content/img/image-placeholder-thumbnail.png');
background-position: 50%;
background-size: auto;
background-repeat: no-repeat;
background-color: #00151c;
position: absolute;
width: 100%;
height: 49%;
top: 0;
}
.mySwiper .top-banner .content .image-background.b-loaded {
filter: brightness(80%);
}
.mySwiper .swiper-wrapper .swiper-slide .top-banner .row .wrapper img.image-brand {
margin-top: 125px;
}
html body .mySwiper .row.into-swiper > .columns {
text-align: center;
justify-content: center;
padding-bottom: 23px;
}
.collections .collection[data-name-component=GridProgramme] .eg-scroll-prev {
position: absolute;
background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeD0iMCIgeT0iMCIgdmlld0JveD0iMCAwIDE0MS43IDE0MS43IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGU+LnN0MHtmaWxsOm5vbmU7c3Ryb2tlOiNmZmY7c3Ryb2tlLXdpZHRoOjE1LjY1OTU7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwfTwvc3R5bGU+PHBhdGggY2xhc3M9InN0MCIgZD0iTTMwLjkgNzAuOGw3OS43LTU5TTExMC42IDEyOS45TDMwLjkgNzAuOCIvPjwvc3ZnPg==);
background-color: #8d9ca0;
width: 38px;
height: 100%;
content: '';
top: 0px;
right: 0;
background-size: 25px;
background-repeat: no-repeat;
background-position: center right 5px;
}
.collections .collection[data-name-component=GridProgramme] .eg-scroll-next{
position: absolute;
background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeD0iMCIgeT0iMCIgdmlld0JveD0iMCAwIDE0MS43IDE0MS43IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGU+LnN0MHtmaWxsOm5vbmU7c3Ryb2tlOiNmZmY7c3Ryb2tlLXdpZHRoOjE1LjY1OTU7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwfTwvc3R5bGU+PHBhdGggY2xhc3M9InN0MCIgZD0iTTExMC42IDcwLjhsLTc5LjcgNTkuMU0zMC45IDExLjhsNzkuNyA1OSIvPjwvc3ZnPg==);
background-color: #8d9ca0;
width: 38px;
height: 100%;
content: '';
top: 0px;
right: 0;
background-size: 25px;
background-repeat: no-repeat;
background-position: center right 5px;
}
.collections .collection[data-name-component=GridProgramme] > .row:nth-child(2) >.columns {
position: relative;
padding-left: 35px;
}
.eg-scroll-prev {
left: 0px;
right: auto;
}
.eg-slider .swiper-slide .box .card .description .actions a {
flex-direction: column;
}
.eg-slider .swiper-slide .box .card .bottom {
max-height: 84px !important;
margin-bottom: 4px !important;
}
html body .collections .alphabeth {
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
}
html body .collections .alphabeth::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
.mySwiper .swiper-slide[data-swiper-slide-index="2"] .top-banner .content .image-background.b-loaded{
background-position: 81% 0 !important;
}
.mySwiper .swiper-slide[data-swiper-slide-index="2"] .top-banner .row .wrapper img.image-brand {
left: -95px;
position: relative;
}
.collections .top-area {
padding-bottom: 0px;
}
}
.eg-slider .card-content-inside .top-animation .discover > span:last-child,
.eg-slider .card-content-inside .top-animation .play-now > span:last-child {
display: none;
}
.eg-slider .card-content-inside .top-animation .play-now .play-animation {
margin: 0;
max-width: 50px;
}
.eg-slider .card-content-inside .top-animation .inner-content {
width: 100%;
left: 0px;
padding: 0px;
justify-content: flex-start;
align-items: center;
}
.eg-slider .card-content-inside .top-animation .inner-content i.icon-discover-more {
font-size: 2rem;
line-height: 0;
margin-right: 0.9375rem;
position: relative;
top: -4px;
}
.eg-slider .card-content-inside .top-animation .inner-content a{
width: 65px !important;
}
</style>
window.topSLide = `
<div class="swiper mySwiper swiper-top" data-name-component="HeroCarousel" data-update="Only-3_1-image">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="top-banner auto">
<div class="content">
<div class="image-wrapper loaded">
<div class="Half-degraded"></div>
<div class="image-background-show b-loaded" style="background-image: url("https://static.bbus-static.com/shain/v1/dataservice/ResizeImage/$value?Format='jpg'&Quality=65&Width=1800&Height=600&ImageUrl=346994.jpg&imageType=hero3x1"); display: block; opacity: 1.03196; filter: opacity(1);"></div>
</div>
<div class="row">
<div class="columns mobile">
<div class="wrapper">
<nav role="navigation">
<ul class="breadcrumbs">
<li class="active">Featured</li>
</ul>
</nav> <img src="https://static.bbus-static.com/shain/v1/dataservice/ResizeImage/$value?Format='png'&Quality=50&Width=419&Height=140&ImageUrl=346980.png&imageType=brand" class="image-brand">
<div data-tracking="">Karen Pirie</div>
<h1 class="Title-only-mobile">Karen Pirie</h1>
<p class="description">
Newly promoted DS Karen Pirie is tasked with reopening a daunting cold case - the subject of a provocative true crime podcast.
</p>
</div>
<div data-id="45302" class="actions"><a fragment="cd46fe5b86" href="https://account.britbox.com/signup?callback=https://www.britbox.com/us/account/signupcallback?returnURL=/us/programmes&country=us&deviceName=Windows&deviceType=Desktop&exp=1642616559&action=skipIdle&key=7492a396a7260808f99d997485e7561cbc085635cdca82d7d78a28ef2a9ebef14a36628f23cea77b97270ff93b739f18cc7050129d405d59700319b31de150b8" data-itemid="45302" https:="" account.britbox.com="" class="play-now"><span class="play-animation"></span> <span>Start Watching For Free</span></a> <a fragment="cd46fe5b86" href="/us/show/Karen_Pirie_89999" class="discover"><i class="icon-discover-more"></i> <span>Discover
more</span></a></div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="top-banner auto">
<div class="content">
<div class="image-wrapper loaded">
<div class="Half-degraded"></div>
<div class="image-background-show b-loaded" style="background-image: url("https://static.bbus-static.com/shain/v1/dataservice/ResizeImage/$value?Format='jpg'&Quality=65&Width=1800&Height=600&ImageUrl=346494.jpg&imageType=hero3x1"); display: block; opacity: 1.03196; filter: opacity(1);"></div>
</div>
<div class="row">
<div class="columns mobile">
<div class="wrapper">
<nav role="navigation">
<ul class="breadcrumbs">
<li class="active">Featured</li>
</ul>
</nav> <img src="https://static.bbus-static.com/shain/v1/dataservice/ResizeImage/$value?Format='png'&Quality=50&Width=419&Height=140&ImageUrl=346475.png&imageType=brand" class="image-brand">
<div data-tracking="">Sherwood</div>
<h1 class="Title-only-mobile">Sherwood</h1>
<p class="description">
Two shocking killings engulf a town in tension and fear in the captivating crime thriller from award-winning writer James Graham.
</p>
</div>
<div data-id="45252" class="actions"><a fragment="12e5517beaa" href="https://account.britbox.com/signup?callback=https://www.britbox.com/us/account/signupcallback?returnURL=/us/programmes&country=us&deviceName=Windows&deviceType=Desktop&exp=1642616559&action=skipIdle&key=7492a396a7260808f99d997485e7561cbc085635cdca82d7d78a28ef2a9ebef14a36628f23cea77b97270ff93b739f18cc7050129d405d59700319b31de150b8" data-itemid="45252" https:="" account.britbox.com="" class="play-now"><span class="play-animation"></span> <span>Start Watching For Free</span></a> <a fragment="12e5517beaa" href="/us/show/Sherwood_p0c724lz" class="discover"><i class="icon-discover-more"></i> <span>Discover
more</span></a></div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="top-banner auto eg-ask-evans">
<div class="content">
<div class="image-wrapper loaded">
<div class="Half-degraded"></div>
<div class="image-background b-lazy b-loaded" style="background-image: url("https://static.bbus-static.com/shain/v1/dataservice/ResizeImage/$value?Format='jpg'&Quality=65&Width=1800&Height=600&ImageUrl=325065.jpg&imageType=hero3x1");"></div>
</div>
<div class="row">
<div class="columns mobile">
<div class="wrapper">
<nav role="navigation">
<ul class="breadcrumbs">
<li class="active">Featured</li>
</ul>
</nav> <img src="https://static.bbus-static.com/shain/v1/dataservice/ResizeImage/$value?Format='png'&Quality=50&Width=419&Height=140&ImageUrl=328507.png&imageType=brand" class="image-brand">
<div data-tracking="">Why Didn't They Ask Evans?</div>
<h1 class="Title-only-mobile">Why Didn't They Ask Evans?</h1>
<p class="description"> Agatha Christie's wittiest mystery ever. Lucy Boynton and Will Poulter star in Hugh Laurie’s new adaptation, where two amateur sleuths set out to find the meaning behind a dead man’s mysterious final words. </p>
</div>
<div data-id="42198" class="actions"><a fragment="fafc16606c" href="https://account.britbox.com/signup?callback=https://www.britbox.com/us/account/signupcallback?returnURL=/us/programmes&country=us&deviceName=Windows&deviceType=Desktop&exp=1642616559&action=skipIdle&key=7492a396a7260808f99d997485e7561cbc085635cdca82d7d78a28ef2a9ebef14a36628f23cea77b97270ff93b739f18cc7050129d405d59700319b31de150b8" data-itemid="42198" https:="" account.britbox.com="" class="play-now"><span class="play-animation"></span> <span>Start Watching For Free</span></a> <a class="discover" href="/us/show/Why_Didnt_They_Ask_Evans_68247" fragment="fafc16606c"><i class="icon-discover-more"></i> <span>Discover
more</span></a></div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="top-banner auto">
<div class="content">
<div class="image-wrapper loaded">
<div class="Half-degraded"></div>
<div class="image-background b-lazy b-loaded"
style="background-image: url("https://static.bbus-static.com/shain/v1/dataservice/ResizeImage/$value?Format='jpg'&Quality=65&Width=1800&Height=600&ImageUrl=331645.jpg&imageType=hero3x1");">
</div>
</div>
<div class="row">
<div class="columns mobile">
<div class="wrapper">
<nav role="navigation">
<ul class="breadcrumbs">
<li class="active">Featured</li>
</ul>
</nav> <img
src="https://static.bbus-static.com/shain/v1/dataservice/ResizeImage/$value?Format='png'&Quality=50&Width=419&Height=140&ImageUrl=331643.png&imageType=brand"
class="image-brand">
<div data-tracking="">The Responder</div>
<h1 class="Title-only-mobile">The Responder</h1>
<p class="description">BAFTA-winner Martin Freeman delivers a spellbinding
performance in this new crime thriller as police response officer Chris Carson,
who struggles to keep a grip on his marriage and mental health.
</p>
</div>
<div data-id="43053" class="actions"><a fragment="2c2e8df884"
href="https://account.britbox.com/signup?callback=https://www.britbox.com/us/account/signupcallback?returnURL=/us/programmes&country=us&deviceName=Windows&deviceType=Desktop&exp=1642616559&action=skipIdle&key=7492a396a7260808f99d997485e7561cbc085635cdca82d7d78a28ef2a9ebef14a36628f23cea77b97270ff93b739f18cc7050129d405d59700319b31de150b8"
data-itemid="24144" https:="" account.britbox.com="" class="play-now"><span
class="play-animation"></span> <span>Start Watching For Free</span></a> <a
fragment="2c2e8df884" href="/us/show/The_Responder_p0b61z9j" class="discover"><i
class="icon-discover-more"></i> <span>Discover
more</span></a></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row into-swiper">
<div class="columns">
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination">
<div class="no-animation-pagination">
<ul class="horizontal"></ul>
</div>
</div>
</div>
</div>
</div>
</div>
`;
(function() {
try {
/* main variables */
var debug = 0;
var variation_name = "";
/* all Pure helper functions */
function waitForElement(selector, trigger, delayInterval, delayTimeout) {
var interval = setInterval(function() {
if (
document &&
document.querySelector(selector) &&
document.querySelectorAll(selector).length > 0 && window.topSLide
) {
clearInterval(interval);
trigger();
}
}, delayInterval);
setTimeout(function() {
clearInterval(interval);
}, delayTimeout);
}
//wait for swiper
function waitForSwiper(trigger) {
var interval = setInterval(function() {
if (typeof Swiper != "undefined") {
clearInterval(interval);
trigger();
}
}, 50);
setTimeout(function() {
clearInterval(interval);
}, 15000)
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
function addScript() {
var cssScript = '' +
'<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/>' +
"<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css'/>";
$('#head').append(cssScript);
var my_awesome_script = document.createElement('script');
my_awesome_script.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js');
document.head.appendChild(my_awesome_script);
}
var swipeDynamicData;
var data = [{
title: 'Vera',
img: 'https://us.britbox.com/shain/v1/dataservice/ResizeImage/$value?Format=%27jpg%27&Quality=80&Width=405&Height=227&ImageUrl=201950.jpg&imageType=tile',
href: '/us/show/Vera_p053fylw',
moreinfo: 'Show· 1 Season',
description: 'Based on the novels by Ann Cleeves, Brenda Blethyn stars as Vera, the brilliant but irascible investigator obsessed with her work and driven by her own demons. She faces each case with caustic wit and guile, investigating crimes only she can solve.',
datacolnumber: '1',
dataitemid: '13500',
fragment: '13098cb57d7',
},
{
title: 'Death in Paradise',
img: 'https://us.britbox.com/shain/v1/dataservice/ResizeImage/$value?Format=%27png%27&Quality=80&Width=405&Height=227&ImageUrl=211472.png&imageType=tile',
href: '/us/show/Death_in_Paradise_b01pvmf6',
moreinfo: 'Show· 1 Season',
description: 'Welcome to the idyllic island of Saint Marie. With its beautiful tropical charm, you might mistake it for paradise...until you see its murder rate.',
datacolnumber: '2',
dataitemid: '24258',
fragment: '9308899c9a',
},
{
title: 'The Curse',
img: 'https://static.bbus-static.com/shain/v1/dataservice/ResizeImage/$value?Format=%27jpg%27&Quality=80&Width=405&Height=227&ImageUrl=338811.jpg&imageType=tile',
href: '/us/show/The_Curse_86657',
moreinfo: 'Show· 1 Season',
description: 'In this retro crime caper inspired by true events, a gang of hopeless crooks gets accidentally embroiled in Britain\'s biggest gold heist.',
datacolnumber: '3',
dataitemid: '44212',
fragment: 'e120428677',
},
{
title: 'Shetland',
img: 'https://us.britbox.com/shain/v1/dataservice/ResizeImage/$value?Format=%27jpg%27&Quality=80&Width=405&Height=227&ImageUrl=283110.jpg&imageType=tile',
href: 'https://www.britbox.com/us/show/Shetland_p05tb1sm',
moreinfo: 'Show· 1 Season',
description: 'Based on the best-selling books\
by award-winning crime writer Ann Cleeves, Shetland\
follows Detective Jimmy Perez and his team as they\
investigate crime within the close-knit island\
community.',
datacolnumber: '4',
dataitemid: '16947',
fragment: '1c6c29ae5',
},
{
title: 'Hope Street',
img: 'https://static.bbus-static.com/shain/v1/dataservice/ResizeImage/$value?Format=%27jpg%27&Quality=80&Width=405&Height=227&ImageUrl=330629.jpg&imageType=tile',
href: '/us/show/Hope_Street_72532',
moreinfo: 'Show· 1 Season',
description: 'Amara Karan (Bancroft) stars in this uplifting original crime drama. A small town in Northern Ireland sees the mysterious arrival of English DC Leila Hussain, the first Muslim officer in the town\’s history.',
datacolnumber: '5',
dataitemid: '41014',
fragment: 'bab210efb0',
},
{
title: 'The Cleaner',
img: 'https://static.bbus-static.com/shain/v1/dataservice/ResizeImage/$value?Format=%27jpg%27&Quality=80&Width=405&Height=227&ImageUrl=310236.jpg&imageType=tile',
href: '/us/show/The_Cleaner_p09pm359',
moreinfo: 'Show· 1 Season',
description: 'It’s the cops’ job to clean up the city, but it’s Wicky’s job to clean up the crime scenes. BAFTA-winner Greg Davies writes and stars in a truly arresting comedy.',
datacolnumber: '6',
dataitemid: '39676',
fragment: '13091fd499',
},
{
title: 'Sister Boniface Mysteries',
img: 'https://static.bbus-static.com/shain/v1/dataservice/ResizeImage/$value?Format=%27jpg%27&Quality=80&Width=405&Height=227&ImageUrl=319335.jpg&imageType=tile',
href: '/us/show/Sister_Boniface_Mysteries_73774',
moreinfo: 'Show· 1 Season',
description: 'First there was Father Brown. Now, say hello to Sister Boniface. This clever, moped-riding nun is the police\'s secret weapon for solving murders in this divine Father Brown spin-off.',
datacolnumber: '7',
dataitemid: '41171',
fragment: '1378753d31e',
},
{
title: 'Crossfire',
img: 'https://static.bbus-static.com/shain/v1/dataservice/ResizeImage/$value?Format=%27jpg%27&Quality=80&Width=405&Height=227&ImageUrl=349215.jpg&imageType=tile',
href: '/us/show/Crossfire_90996',
moreinfo: 'Show· 1 Season',
description: 'Keeley Hawes stars in this nail-biting story of survival and resilience. An ideal holiday quickly turns into a nightmare when a resort comes under attack.',
datacolnumber: '8',
dataitemid: '45722',
fragment: '1848e8492be',
},
{
title: 'Gardeners\' World',
img: 'https://static.bbus-static.com/shain/v1/dataservice/ResizeImage/$value?Format=%27jpg%27&Quality=80&Width=405&Height=227&ImageUrl=199624.jpg&imageType=tile',
href: '/us/show/Gardeners_World_b006mw1h',
moreinfo: 'Show· 1 Season',
description: 'The BBC’s flagship gardening show packed with down-to-earth advice and timely reminders from experts to get the most out of your garden, whatever its size or type.',
datacolnumber: '9',
dataitemid: '16488',
fragment: '12affc7434d',
},
{
title: 'Agatha Christie\'s Poirot',
img: 'https://static.bbus-static.com/shain/v1/dataservice/ResizeImage/$value?Format=%27jpg%27&Quality=80&Width=405&Height=227&ImageUrl=224684.jpg&imageType=tile',
href: '/us/show/Agatha_Christies_Poirot_p04m8lr8',
moreinfo: 'Show· 1 Season',
description: 'The complete collection. David Suchet stars as Agatha Christie\'s beloved detective Hercule Poirot, who pits his wits against crime and injustice in this collection of murder mysteries.',
datacolnumber: '10',
dataitemid: '11569',
fragment: '169c023e2ac',
}
];
var slide = '';
data.forEach(function(val, i) {
slide += `<div class="swiper-slide">
<div class="box">
<div data-title="${val.title}" data-title-tracking="${val.title}" data-colnumber="${val.datacolnumber}"
class="card "><a href="${val.href}"
onclick="dataLayer.push({'event':'eventSend','actionType': 'submit','actionName':'Navigation','eventLabels':{'eventType':'atc','container':'page','status':'success','label':'selects a program tile in a rail','name':'${val.title}'}})">
<div class="image pulsate loaded"><img
src="${val.img}"
class="b-lazy b-loaded"></div>
</a>
<div class="card-content">
<div class="card-content-inside">
<div class="description">
<div class="top-animation">
<div class="inner-content">
<a fragment="${val.fragment}"
href="${val.href}" data-itemid="${val.dataitemid}" class="play-now"><span
class="play-animation"><img src="/content/img/action-svg/play_now.svg"> <img
src="/content/img/action-svg/continue_watching.svg" style="display: none;"></span>
<span>Play now </span></a> <a fragment="${val.fragment}" href="${val.href}"
data-itemid="${val.dataitemid}" class="play-now trailer" style="display: none;"><span
class="play-animation"><img src="/content/img/action-svg/play-trailer.svg"
class="icon-trailer"></span> <!----></a> <!----> <a fragment="${val.fragment}"
href="${val.href}" class="discover"><i class="icon-discover-more"></i>
<span>Discover more</span></a>
</div>
</div>
<div class="actions bottom">
<a href="${val.href}"
onclick="dataLayer.push({'event':'eventSend','actionType': 'submit','actionName':'Navigation','eventLabels':{'eventType':'atc','container':'page','status':'success','label':'selects a program tile in a rail','name':'${val.title}'}})">
<div class="top">${val.title}</div>
<div class="inner-content">
<div class="season">
<div class="description">${val.description}</div>
<div class="more-info">${val.moreinfo}
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>`;
});
var bottomSlider = `
<div class="swiper episodes new-episodes eg-slider">
<!-- Swiper -->
<div class="row">
<div class="columns">
<div class="top-wrapper">
<h2 class="title">Trending on BritBox</h2>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<div class="row">
<div class="columns">
<div class="swiper-horizontal">
<div class="swiper-container" data-slides-per-view="1" data-slides-per-group="1">
<!-- Add Pagination -->
<div class="swiper-wrapper">
${slide}
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
</div>
</div>
</div>
`;
function init() {
document.querySelector('.main-content.programmes .top-area h1').innerHTML = 'All Shows';
document.querySelector('html body .collections .alphabeth.primary-state').insertAdjacentHTML('afterend', '<span class="eg-scroll-prev"></span><span class="eg-scroll-next"></span>');
document.querySelector('.main-content.programmes > .row:first-child').insertAdjacentHTML('beforebegin', window.topSLide);
document.querySelector('.mySwiper').insertAdjacentHTML('afterend', bottomSlider);
//wait for swiper slider
waitForSwiper(function() {
var swiper = new Swiper(".mySwiper .swiper-container", {
loop: true,
slidesPerView: 1,
spaceBetween: 30,
speed: 3000,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
const egsl = new Swiper('.eg-slider .swiper-container', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
breakpoints: {
767: {
slidesPerView: 1.2
}
}
});
});
// Scroll functionality
if (window.innerWidth < 768) {
let egScroll = 0;
document.querySelector('.eg-scroll-next').addEventListener('click', function() {
egScroll += 100;
// document.querySelector('html body .collections .alphabeth.primary-state').scrollLeft = egScroll;
document.querySelector('html body .collections .alphabeth').scrollBy(egScroll,0)
if (egScroll >= document.querySelector('html body .collections .alphabeth').scrollWidth) {
egScroll = 0;
}
});
document.querySelector('.eg-scroll-prev').addEventListener('click', function() {
egScroll -= 100;
document.querySelector('html body .collections .alphabeth').scrollBy(egScroll,0);
// document.querySelector('html body .collections .alphabeth.primary-state').scrollLeft = egScroll;
if (egScroll <= document.querySelector('html body .collections .alphabeth').scrollWidth) {
egScroll = 0;
}
});
}
}
//get slider data for loggedin user
//add swiper script
addScript();
/* Initialise variation */
waitForElement(".main-content.programmes > .row:first-child", init, 50, 15000);
} catch (e) {
if (debug) console.log(e, "error in Test" + variation_name);
}
})();
Editor is loading...