Fancybox with Owl carousel (lazyLoad)

问题

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

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.

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

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>

回答1:

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

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.

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).

来源：https://stackoverflow.com/questions/53759044/fancybox-with-owl-carousel-lazyload