I've made a carousel-slider here and here but there is a problem.
Here are 3 levels: 1 carousel 2 card with slideshow 3 popup with photo from the card
2nd and 3rd are done through the fancybox. 3rd is called from the 2nd (on the feed it is visible). After closing the popup, the slideshow in the card stops (where the description is).
What is the issue here?
$('.gallery_slider').owlCarousel({
loop: true,
nav: false,
dots: true,
autoplay: true,
autoplayTimeout: 5000,
autoplaySpeed: 2000,
autoplayHoverPause:false,
items: 1,
protect: true,
responsive:{
600:{
}
}
});
$('.product-item').fancybox({
baseClass: 'fancybox-gallery',
animationEffect: "fade",
animationDuration: 300,
margin: 0,
gutter: 0,
loop: true,
slideShow: {
autoStart: true,
speed: 1000
},
zoom: false,
idleTime: false,
thumbs: {
autoStart : true,
axis : 'x'
},
touch: {
vertical: false
},
buttons: [
'close'
],
afterLoad : function() {
$('.fancybox-gallery .fancybox-image').fancybox({
baseClass: 'fancy-images',
animationEffect: "fade",
animationDuration: 300,
buttons: [
"close"
],
afterLoad : function(instance, current) {
setTimeout(function() {
instance.close();
}, 2000);
},
afterClose: function() {
$('.product-item').trigger('play.fancybox.autoStart');
},
baseTpl:
'<div class="fancybox-container" role="dialog" tabindex="-1">' +
'<div class="fancybox-bg"></div>' +
'<div class="fancybox-inner">' +
'<div class="modal-close" href="javascript:;" onclick="$.fancybox.close();"><svg viewBox="0 0 40 40"><path d="M10,10 L30,30 M30,10 L10,30"></path></svg></div>'+
'<div class="fancybox-infobar">' +
"<span data-fancybox-index></span> / <span data-fancybox-count></span>" +
"</div>" +
'<div class="fancybox-toolbar">{{buttons}}</div>' +
'<div class="fancybox-navigation">{{arrows}}</div>' +
'<div class="fancybox-stage"></div>' +
'<div class="fancybox-caption"></div>' +
"</div>" +
"</div>"
});
$('.gallery_slider').trigger('stop.owl.autoplay');
},
afterClose: function() {
$('.gallery_slider').trigger('play.owl.autoplay');
},
baseTpl:
'<div class="fancybox-container" role="dialog" tabindex="-1">' +
'<div class="fancybox-bg"></div>' +
'<div class="fancybox-inner">' +
'<div class="fancybox-infobar">' +
"<span data-fancybox-index></span> / <span data-fancybox-count></span>" +
"</div>" +
'<div class="fancybox-toolbar">{{buttons}}</div>' +
'<div class="fancybox-navigation">{{arrows}}</div>' +
'<div class="fancybox-stage"></div>' +
'<div class="fancybox-caption"></div>' +
"</div>" +
"</div>"
});
/* gallery */
#gallery {
width: 100%;
background: url(../img/back3.png);
background-size: cover;
padding: 52px 0 100px;
font-family: "MonlyBold";
margin-bottom: 10px;
position: relative;
}
#gallery .wrap {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: 0 auto;
}
.gallery_menu {
background: #000;
width: 33%;
height: 150px;
margin: 12px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.gallery_menu:after{
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: black;
opacity: 0.5;
z-index: 1;
}
.gallery_menu a {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
color: #e4e4e4;
font-size: 4em;
position: relative;
z-index: 2;
}
.gallery_menu:nth-child(n) {
transition: background-size 1.5s;
}
.gallery_menu:nth-child(n):hover {
background-size: 120%;
}
.gallery_menu:hover:after {
opacity: 0.3;
}
.gallery_menu:nth-child(1) {
background: url(../img/photos/tiffani/27.jpg) center center;
background-size: 100%;
}
.gallery_menu:nth-child(2) {
background: url(../img/photos/fuzing/IMG_9636-21-03-18-07-42.jpeg.jpg) center center;
background-size: 100%;
}
.gallery_menu:nth-child(3) {
background: url(../img/photos/facets/fac.jpg) center center;
background-size: 100%;
}
.gallery_menu:nth-child(4) {
background: url(../img/photos/gravirovka/grav.jpg) center center;
background-size: 100%;
}
.gallery_menu:nth-child(5) {
background: url(../img/photos/mixed/IMG_9715-21-03-18-07-42.jpeg.jpg) center center;
background-size: 100%;
}
.gallery_menu:nth-child(6) {
background: url(../img/photos/psevdo/IMG_0924.JPG) center center;
background-size: 100%;
}
#gallery-1,#gallery-2 {
width: 70%;
height: 500px;
display: none;
}
.gallery_text {
width: 40%;
float: right;
}
.gallery_text p {
color: #000;
}
#gallery .h1 {
margin-bottom: 8px;
}
#gallery .h3{
text-decoration: underline;
margin-top: 20px;
}
.owl-carousel button.owl-dot {
width: 10px;
height: 10px;
border-radius: 20px;
margin: 5px;
border: .5px solid #ddd;
background: #ddd;
}
.owl-carousel button.owl-dot.active {
background: #000;
border: .5px solid #000;
}
/* grid */
/* Style your page (the product list) */
.og-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
max-width: 1200px;
margin: 0 auto;
}
.product {
margin: 10px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
max-width: 300px;
max-height: 200px;
}
.product .product-images,
.product .product-form {
display: none;
}
.product-item img{
max-width: 100%;
}
/* Reposition and redesign fancyBox blocks */
/* This elements contains both blocks */
.fancybox-gallery .fancybox-inner {
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: calc(100% - 40px);
height: calc(100% - 40px);
max-width: 900px;
max-height: 400px;
background: #ddd;
}
.fancybox-gallery .fancybox-infobar {
display: none;
}
/* Left block will contain the gallery */
.fancybox-gallery .fancybox-stage {
width: 50%;
}
/* Right block - close button and the form */
.fancybox-gallery .fancybox-caption-wrap {
width: 50%;
height: 100%;
top: 0;
right: 0;
left: auto;
bottom: auto;
background: none;
}
.fancybox-gallery .fancybox-caption {
position: absolute;
/* display: flex; */
border: none;
width: 50%;
right: 0;
top: 0;
}
/* Set position and colors for close button */
.fancybox-gallery .fancybox-button--close {
position: absolute;
top: 0;
right: 0;
background: #F0F0F0;
color: #222;
padding: 7px;
}
.fancybox-gallery .fancybox-button:hover {
color: #111;
background: #e4e4e4;
}
.fancybox-gallery .fancybox-button svg path {
stroke-width: 1;
}
/* Set position of the form */
.fancybox-gallery .fancybox-inner .product-form {
overflow: auto;
position: absolute;
top: 50px;
right: 0;
bottom: 50px;
left: 0;
padding: 0 50px;
text-align: center;
}
.fancybox-gallery .fancybox-caption h3 {
font-weight: 300;
font-size: 52px;
padding: 40px 0 10px;
margin-bottom: 10px;
color: #2c2c2c;
font-family: "MonlyBold";
}
.fancybox-gallery .fancybox-caption p {
font-weight: 400;
font-size: 22px;
line-height: 24px;
color: #6b6b6b;
font-family: "MonlyBold";
}
.fancybox-gallery .fancybox-image, .fancybox-gallery .fancybox-spaceball {
padding: 30px;
max-width: 600px;
max-height: 600px;
display: block!important;
}
/* Tweak fade animation */
.fancybox-gallery .fancybox-inner {
opacity: 1;
transition: opacity .3s;
}
.fancybox-gallery .fancybox-is-open .fancybox-inner {
opacity: 1;
}
.fancybox-gallery .fancybox-is-closing .fancybox-fx-fade {
opacity: 1 !important; /* Prevent double-fading */
}
/* Bullet navigation design */
.fancybox-gallery .fancybox-navigation button {
z-index: 100001;
}
.fancybox-gallery .fancybox-thumbs {
top: 450px;
width: calc(100% - 60px);
max-width: 880px;
bottom: 0;
left: 0;
right : 0;
height: 95px;
padding: 10px 5px 0px 0px;
box-sizing: border-box;
margin: auto;
background: #ddd;
overflow: hidden;
box-shadow: 10px 10px 0 #ddd, -10px -10px #ddd,10px -10px 0 #ddd, -10px 10px #ddd;
}
.fancybox-gallery .fancybox-show-thumbs .fancybox-inner {
right: 0;
bottom: 95px;
}
/* -------------------- */
.fancy-images .fancybox-image,
.fancy-images .fancybox-spaceball {
max-width: 80%;
max-height: 80%;
width: auto;
height: auto;
margin-left: 24%;
bottom: 0;
left: 0;
right : 0;
top: 0;
margin: auto;
}<div class="gallery_slider owl-carousel">
<ul class="og-grid">
<div class="product">
<a class="product-item" href="https://www.telegraph.co.uk/content/dam/pets/2017/01/06/1-JS117202740-yana-two-face-cat-news_trans_NvBQzQNjv4BqJNqHJA5DVIMqgv_1zKR2kxRY9bnFVTp4QZlQjJfe6H0.jpg?imwidth=450"
data-caption="
<h3>text</h3>
"
data-fancybox="quick-view-2"
data-type="image"
>
<img src="https://www.telegraph.co.uk/content/dam/pets/2017/01/06/1-JS117202740-yana-two-face-cat-news_trans_NvBQzQNjv4BqJNqHJA5DVIMqgv_1zKR2kxRY9bnFVTp4QZlQjJfe6H0.jpg?imwidth=450" />
</a>
</div>
<div class="product">
<a class="product-item" href="https://www.catster.com/wp-content/uploads/2017/11/A-Siamese-cat.jpg"
data-caption="
<h3>text</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt libero voluptatem beatae </p>
"
data-fancybox="quick-view-2"
data-type="image"
>
<img src="https://www.catster.com/wp-content/uploads/2017/11/A-Siamese-cat.jpg" />
</a>
</div>
</ul>
<ul class="og-grid">
<div class="product">
<a class="product-item" href="https://www.telegraph.co.uk/content/dam/pets/2017/01/06/1-JS117202740-yana-two-face-cat-news_trans_NvBQzQNjv4BqJNqHJA5DVIMqgv_1zKR2kxRY9bnFVTp4QZlQjJfe6H0.jpg?imwidth=450"
data-caption="
<h3>text</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt libero voluptatem beatae</p>
"
data-fancybox="quick-view-2"
data-type="image"
>
<img src="https://www.telegraph.co.uk/content/dam/pets/2017/01/06/1-JS117202740-yana-two-face-cat-news_trans_NvBQzQNjv4BqJNqHJA5DVIMqgv_1zKR2kxRY9bnFVTp4QZlQjJfe6H0.jpg?imwidth=450" />
</a>
</div>
<div class="product">
<a class="product-item" href="https://www.catster.com/wp-content/uploads/2017/11/A-Siamese-cat.jpg"
data-caption="
<h3>text</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt libero voluptatem beatae </p>
"
data-fancybox="quick-view-2"
data-type="image"
>
<img src="https://www.catster.com/wp-content/uploads/2017/11/A-Siamese-cat.jpg" />
</a>
</div>
</ul>
<ul class="og-grid">
<div class="product">
<a class="product-item" href="https://www.telegraph.co.uk/content/dam/pets/2017/01/06/1-JS117202740-yana-two-face-cat-news_trans_NvBQzQNjv4BqJNqHJA5DVIMqgv_1zKR2kxRY9bnFVTp4QZlQjJfe6H0.jpg?imwidth=450"
data-caption="
<h3>text</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt libero voluptatem beatae</p>
"
data-fancybox="quick-view-2"
data-type="image"
>
<img src="https://www.telegraph.co.uk/content/dam/pets/2017/01/06/1-JS117202740-yana-two-face-cat-news_trans_NvBQzQNjv4BqJNqHJA5DVIMqgv_1zKR2kxRY9bnFVTp4QZlQjJfe6H0.jpg?imwidth=450" />
</a>
</div>
<div class="product">
<a class="product-item" href="https://www.catster.com/wp-content/uploads/2017/11/A-Siamese-cat.jpg"
data-caption="
<h3>text</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt libero voluptatem beatae </p>
"
data-fancybox="quick-view-2"
data-type="image"
>
<img src="https://www.catster.com/wp-content/uploads/2017/11/A-Siamese-cat.jpg" />
</a>
</div>
</ul>
</div>$('.product-item').trigger('play.fancybox.autoStart'); was needed