JQuery

Question

我编写了一个使用 Slick Slider 插件的系统，这样我就可以从一个内容水平滑动到另一个内容（这些幻灯片包括图片和文本）。我还添加了 Fancybox，以便在需要时可以全屏查看这些幻灯片中的图片。

但这两个插件有点冲突。

一切正常，但如果我有不止一张幻灯片，Fancybox 画廊会多次显示同一张图片（它的行为类似于同一图片的画廊）。

这显然是一个冲突，因为当我删除滑块 js 文件时，Fancybox 再次正常工作（每张图片只显示一次）。

当我同时保留这两个画廊时，最奇怪的是画廊行为只在我添加滑块时发生，即使它们根本没有嵌入任何东西，没有 Fancybox，没有图片，什么都没有。

下面是一个 jsfiddle link。我的代码当然要复杂得多，但我让它尽可能简单，以用于测试用例。除了插件之外几乎没有样式或js。

您会发现，如果您删除“.slider2”div 中的所有内容，它就会表现得很好。如果不是，第一张图片将显示 2 张相同图片的图库（而不是一张，默认情况下它会显示 2 张图片中的第 1 张），而第二张图片将显示 3 张相同图片的图库（而不是一张）它会默认显示它显示的是第 2 张图片，共 3 张图片）。

感谢您的帮助。

<head>

    <link rel="stylesheet" type="text/css" href="styles/jquery.fancybox.css" />
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>

    <style>
        img{width:50%;}
    </style>
</head>

<body>

    <div class="container">

        <div class="slider_block">

            <div class="slider1">

                <a data-fancybox="test1" href="https://www.lexgotham.com/test/images/im1.jpg">

                    <img alt="" src="https://www.lexgotham.com/test/images/im1.jpg" />

                </a>

            </div>

            <div class="slider2">

                <a data-fancybox="test2" href="https://www.lexgotham.com/test/images/im2.jpg">

                    <img alt="" src="https://www.lexgotham.com/test/images/im2.jpg" />

                </a>

            </div>

        </div>

    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>   

    <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>

    <script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

    <script>$(document).ready(function() {$('.sliding').slick({});});</script>

</body>

演示：http://jsfiddle.net/evsq80az/10

Answer 1

滑动克隆幻灯片以便"rotate" 轮播。这意味着您有超过 1 张具有相同值 data-fancybox 的图片。它作为 rel 值传递给每个具有 data-fancybox 值的 link。

要禁用图库功能，您不能传递 rel 值，因此只需指定没有值的 data-fancybox：

<a data-fancybox href="https://www.lexgotham.com/test/images/im2.jpg">

看到它有效：

$(window).on('load', () => {
  $('.slider_block').slick();
});

img {
  width: 50%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.css" rel="stylesheet" />
<link href="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>
<script src="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<html>


<div class="container">
  <div class="slider_block">
    <div class="slider1">
      <a data-fancybox href="https://www.lexgotham.com/test/images/im1.jpg">
        <img alt="" src="https://www.lexgotham.com/test/images/im1.jpg" />
      </a>
    </div>
    <div class="slider2">
      <a data-fancybox href="https://www.lexgotham.com/test/images/im2.jpg">
        <img alt="" src="https://www.lexgotham.com/test/images/im2.jpg" />
      </a>
    </div>
  </div>
</div>

如果您需要 rels（图库功能）来创建幻灯片的自定义组，则必须通过禁用其无限旋转来防止 slick 克隆幻灯片：

 $('.slider_block').slick({
   infinite: false;
 });

$(window).on('load', () => {
  $('.slider_block').slick({infinite:false});
});

img {
  width: 50%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.css" rel="stylesheet" />
<link href="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>
<script src="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<html>


<div class="container">
  <div class="slider_block">
    <div>
      <a data-fancybox="gallery-1" href="https://www.lexgotham.com/test/images/im1.jpg">
        <img alt="" src="https://www.lexgotham.com/test/images/im1.jpg" />
      </a>
    </div>
    <div>
      <a data-fancybox="gallery-1" href="https://www.lexgotham.com/test/images/im2.jpg">
        <img alt="" src="https://www.lexgotham.com/test/images/im2.jpg" />
      </a>
    </div>
    <div>
      <a data-fancybox="gallery-2" href="https://www.lexgotham.com/test/images/im1.jpg">
        <img alt="" src="https://www.lexgotham.com/test/images/im1.jpg" />
      </a>
    </div>
    <div>
      <a data-fancybox="gallery-2" href="https://www.lexgotham.com/test/images/im2.jpg">
        <img alt="" src="https://www.lexgotham.com/test/images/im2.jpg" />
      </a>
    </div>
  </div>
</div>

P.S: [SO] 不允许你将 links 添加到 jsfiddle 因为 fiddle 必须在 post ，而不是在 JSfiddle 上。如果您更新 fiddle（因为，也许，您想测试答案？）它将不再与未来的用户相关。这意味着你寻求帮助但不想帮助别人。

简而言之，你可以link一个fiddle，但它必须恭维问题中的代码，而不是替换它。

Answer 2

您必须使用 selector 为 "real" 幻灯片初始化脚本，然后只需为克隆的幻灯片添加自定义点击事件：

var selector = '.slick-slide:not(.slick-cloned)';

// Init fancybox, skip cloned elements
$().fancybox({
  selector : selector,
  backFocus : false,
  animationEffect : "fade"
});

// Custom click event on cloned elements, 
$(document).on('click', '.slick-cloned', function(e) {
  $(selector)
    .eq( ( $(this).attr("data-slick-index") || 0) % $(selector).length )
    .trigger("click.fb-start", { $trigger: $(this) });

  return false;
});

演示 - https://codepen.io/fancyapps/pen/jvbEgo

Answer 3

如果您使用的是 fancybox 的 v3，这对我来说是最佳解决方案。使用 update() 重新计算大小。

   $('[data-fancybox="images"]').fancybox({

        afterLoad : function(instance, current) {
            instance.update();

        }
    });

Answer 4

以防万一有人正在寻找一种不在您的 fancybox 画廊 (v3) 中显示克隆幻灯片的简单可靠方法。只需简单地使用此代码：

$('[data-fancybox]:not(.slick-cloned)').fancybox();

Answer 5

这段代码帮你解决了slick slider与fancybox的冲突问题。此外，解决了启用光滑滑块无限循环时 fancybox 弹出窗口中的重复缩略图问题。 让我们试试下面的代码。

 jQuery(document).ready(function ($) {
        $('.carousel-section').each(function () {
            var selector = '.carousel-section .slick-slide:not(.slick-cloned) [data-fancybox="fancybox_view"]';
    
            $().fancybox({
                selector: selector,
                backFocus: false,
                margin: [44, 0, 22, 0],
                baseClass: 'carousel-fancybox-wrapper',
                loop: true,
                thumbs: {
                    autoStart: thumb,
                    axis: 'x'
                },
                toolbar: true,
                infobar: true,
            })
 
            $('.carousel-section').on('click', '.slick-cloned', function (e) {
                $(selector)
                    .eq(($(e.currentTarget).attr("data-slick-index") || 0) % $(selector).length)
                    .trigger("click", {
                        $trigger: $(this)
                    });
                return false;
            });
        })
        
    });

JQuery - Slick Carousel 和 Fancybox 冲突

JQuery - Slick Carousel and Fancybox conflict

carousel

slick.js

fancybox-3