Fancybox с совой-каруселью (lazyLoad) - PullRequest
Новая
       84

Fancybox с совой-каруселью (lazyLoad)

0 голосов
/ 13 декабря 2018

Я использую 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>

1 Ответ

0 голосов
/ 13 декабря 2018

Похоже, что эта проблема вызвана функцией "place-focus-back" в fancybox, и вы можете отключить ее, добавив 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 атрибуты).

...