带有 Owl 轮播的 Fancybox (lazyLoad)

Question

我正在使用 Fancybox v3.5.4 和 Owl carousel v2.3.4 以及lazyLoad 选项

当我们点击照片时，Fancybox 会弹出照片。然后如果我们点击“下一步”几次以获取 Fancybox 上的下一张照片，然后关闭它，猫头鹰轮播上的照片就消失了。

似乎轮播已更改其背景位置并显示由于lazyLoad选项而尚未加载的照片。有谁明白这里发生了什么？我花了很多时间在这个..谢谢你

您可以在此处查看示例： https://codepen.io/Philippe_12/pen/bOVOrK

$('.owl-carousel').owlCarousel({
   items: 4,
        loop:true,
        pagination: false,
        slideSpeed: 700,
        paginationSpeed: 700,
        rewindSpeed: 700,
        lazyLoad: true
});

$().fancybox({
  selector : '.owl-item:not(.cloned) a',
  hash   : false,
  thumbs : {
    autoStart : true
  },
  buttons : [
    'zoom',
    'download',
    'close'
  ]
});

.img_container{ width:50%}

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.4/jquery.fancybox.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.4/jquery.fancybox.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<h2>fancyBox v3.2 - OwlCarousel2 lazyLoad</h2>

<div class="img_container owl-carousel owl-theme">
   <a href="https://placehold.it/350x250&text=1" data-fancybox="images">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=1" alt="">
  </a>
  <a href="https://placehold.it/350x250&text=2" data-fancybox="images">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=2" alt="">
  </a>
  <a href="https://placehold.it/350x250&text=3" data-fancybox="images">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=3" alt="">
  </a>
  <a href="https://placehold.it/350x250&text=4" data-fancybox="images">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=4" alt="">
  </a>
  <a href="https://placehold.it/350x250&text=5" data-fancybox="images">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=5" alt="">
  </a>

  <a href="https://placehold.it/350x250&text=6" data-fancybox="images">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=6" alt="">
  </a>

  <a href="https://placehold.it/350x250&text=7" data-fancybox="images">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=7" alt="">
  </a>

  <a href="https://placehold.it/350x250&text=8" data-fancybox="images">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=8" alt="">
  </a>

  <a href="https://placehold.it/350x250&text=9" data-fancybox="images">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=9" alt="">
  </a>

  <a href="https://placehold.it/350x250&text=10" data-fancybox="images">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=10" alt="">
  </a>
  <a href="https://placehold.it/350x250&text=11" data-fancybox="images">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=11" alt="">
  </a>
  <a href="https://placehold.it/350x250&text=12" data-fancybox="images">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=12" alt="">
  </a>
  <a href="https://placehold.it/350x250&text=13" data-fancybox="images">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=13" alt="">
  </a>
  <a href="https://placehold.it/350x250&text=14" data-fancybox="images">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=14" alt="">
  </a>
</div>

Answer 1

看起来该问题是由 fancybox 的“place-focus-back”功能引起的，您可以通过在初始化时添加 backFocus : false 来禁用它。

您可能没有注意到的另一个问题是您仅在“非克隆”项目上初始化了 fancybox。这意味着，如果您滑动得足够多并单击其中一张克隆幻灯片，fancybox 将以默认选项开始（因为克隆也将具有 data-fancybox="images" 属性）。有一个为其他滑块解决此问题的示例 - https://fancyapps.com/fancybox/3/docs/#faq-6 - 但是，您需要对 owlCarousel 进行一些调整，因为它不会添加任何属性来指示每张幻灯片的索引。

这是一个可能的解决方案 - https://codepen.io/fancyapps/pen/yGYWNy?editors=1010（请注意，我已删除 data-fancybox="images" 并添加了 data-index 属性）。