带猫头鹰传送带的Fancybox(lazyLoad) [英] Fancybox with Owl carousel (lazyLoad)

问题描述

我正在使用带有lazyLoad选项的Fancybox v3.5.4和Owl carousel v2.3.4

I'm using Fancybox v3.5.4 and Owl carousel v2.3.4 with lazyLoad option

当我们单击照片时，Fancybox会弹出照片.然后，如果我们多次单击下一步"以在Fancybox上获取下一张照片，然后将其关闭，则猫头鹰轮播上的照片将消失.

When we click on a photo, Fancybox makes the photo pop up. Then if we click on "Next" few times to get the next photos on Fancybox and then close it, the photos on the owl carousel have disappeared.

轮播似乎已更改其背景位置，并显示由于lazyLoad选项尚未加载的照片.有人知道这里发生了什么吗?我花了很多时间..谢谢

It seems that the carousel has changed its background position and displays photos not loaded yet because of the lazyLoad option. Does anyone understand what is going on here? I spent lot of time on this.. Thank you

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

You can see an example here: 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>

推荐答案

该问题看起来是由于fancybox的位置-焦点-后退"功能引起的，您可以在初始化时通过添加backFocus : false来禁用它.

Looks like that issue is caused by "place-focus-back" feature of fancybox and you can disable that by adding backFocus : false while initializing.

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

Another issue that you might not have noticed is that you have initialized fancybox on "non-cloned" items only. That means, if you swipe enough and click on one of cloned slide, fancybox will start with default options (because clones will have data-fancybox="images" attribute, too). There is a sample of solving this issue for other slider - https://fancyapps.com/fancybox/3/docs/#faq-6 - but, you need a couple of tweaks for owlCarousel, because it does not add any attribute indicating what index each slide has.

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

Here is a possible solution - https://codepen.io/fancyapps/pen/yGYWNy?editors=1010 (note that I have removed data-fancybox="images" and added data-index attributes).

这篇关于带猫头鹰传送带的Fancybox(lazyLoad)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！