这里有3个级别： 1个轮播 2张带幻灯片的卡 3张弹出卡中的照片
第二个和第三个通过fancybox完成。从第2个开始调用第3个（在Feed上可见）。 关闭弹出窗口后，卡片中的幻灯片将停止播放（在此处进行描述）。
这是什么问题？
$('.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>
答案 0 :(得分：0)
我无法通过上述陈述重现该问题，您要从哪个浏览器进行检查？
答案 1 :(得分：0)
对于类似owlCarousel的滑块，您需要像这样初始化fancybox：
$().fancybox({
selector : '.owl-item:not(.cloned) a',
});
答案 2 :(得分：0)
$（'。product-item'）。trigger（'play.fancybox.autoStart'）; 需要