Fancybox with Owl carousel (lazyLoad)
Fancybox with Owl carousel (lazyLoad)
我正在使用 Fancybox v3.5.4 和 Owl 带有 lazyLoad 选项的 carousel v2.3.4
当我们点击一张照片时,Fancybox 会弹出照片。然后,如果我们点击 "Next" 几次以获取 Fancybox 上的下一张照片,然后将其关闭,owl 轮播中的照片就会消失。
由于 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>
看起来这个问题是由 fancybox 的 "place-focus-back" 功能引起的,您可以通过在初始化时添加 backFocus : false
来禁用它。
您可能没有注意到的另一个问题是您仅在 "non-cloned" 项上初始化了 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
属性)。
我正在使用 Fancybox v3.5.4 和 Owl 带有 lazyLoad 选项的 carousel v2.3.4
当我们点击一张照片时,Fancybox 会弹出照片。然后,如果我们点击 "Next" 几次以获取 Fancybox 上的下一张照片,然后将其关闭,owl 轮播中的照片就会消失。
由于 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>
看起来这个问题是由 fancybox 的 "place-focus-back" 功能引起的,您可以通过在初始化时添加 backFocus : false
来禁用它。
您可能没有注意到的另一个问题是您仅在 "non-cloned" 项上初始化了 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
属性)。