为什么 fancybox 幻灯片会停止？

Question

我做了一个轮播滑块here and here 但是有一个问题。

这里有 3 个级别： 1个轮播 2 张带幻灯片的卡片 3 弹出卡片中的照片

第二个和第三个是通过fancybox完成的。第三个是从第二个调用的（在提要上它是可见的）。关闭弹出窗口后，卡片中的幻灯片停止播放（说明所在的位置）。

这里有什么问题？

    $('.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>&nbsp;/&nbsp;<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>&nbsp;/&nbsp;<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>

Answer 1

我无法重现上述语句的问题，您是从哪个浏览器检查的？

Answer 2

对于像owlCarousel这样的滑块，你需要像这样初始化fancybox：

$().fancybox({
  selector : '.owl-item:not(.cloned) a',
});

演示 - https://codepen.io/fancyapps/pen/mqvOoz

Answer 3

$('.product-item').触发器('play.fancybox.autoStart'); 需要

为什么 fancybox 幻灯片会停止？

why does the fancybox slideshow stop?

javascript

frontend

fancybox