代码之家 › 专栏 › 技术社区 › Bachir Messaouri

jquery-圆滑的旋转木马和FancyBox冲突

fancybox-3 slick.js carousel jquery

2

Bachir Messaouri · 技术社区 · 8 年前

我已经编写了一个使用SlickSlider插件的系统,这样我就可以从一个内容水平滑动到另一个内容(这些幻灯片包括图片和文本)。我还添加了FancyBox,以便在需要时可以全屏查看幻灯片中的图片。

但是这两个插件有点冲突。

一切正常,但如果我有不止一张幻灯片,FancyBox画廊会多次显示同一张图片(它的行为就像是同一张图片的画廊)。

很明显这是一个冲突,当我去掉slider JS文件时,FancyBox会像它应该的那样工作(每个图片只显示一次)。

当我保留这两个库时,最奇怪的是,库行为只在我添加滑块时发生,即使它们根本没有嵌入任何内容,没有任何幻想框,没有图片,没有任何内容。

下面是一个jsFiddle链接。当然,我的代码要复杂得多,但是我尽可能地简化测试用例。除了插件外,几乎没有样式或JS。

你会发现,如果你去掉了“.slider2”分区中的所有内容,它的行为就会很好。如果没有,第一张图片将显示一个包含2张相同图片的库(而不是一张,默认情况下它显示的是2张图片中的1张),而第二张图片将显示包含3张相同图片的库(而不是一张,默认情况下它显示的是3张图片中的2张)。

谢谢你的帮助。

<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

3 回复 | 直到 7 年前

1

tao 8 年前

光滑的 无性系 滑动以“旋转”传送带。这意味着你有一张以上的图片,它们的值相同 data-fancybox . 作为 rel 每个链接的值 数据框 价值。

要禁用“库”功能,您不必通过 雷尔 值,因此只需指定 数据框 没有值:

<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{
宽度: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:[所以]不允许你添加到jsFiddle的链接,因为这个fiddle必须在post中,而不是jsFiddle上。如果你更新你的小提琴(因为,也许,你想测试答案?)它将不再与未来的用户相关。这意味着你寻求帮助,但不想帮助别人。

简而言之,您可以链接一个小提琴,但它必须补充问题中的代码,而不是替换它。

2

Janis 8 年前

必须使用初始化脚本 selector 对于“真实”幻灯片,只需为克隆的幻灯片添加自定义单击事件:

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

3

0

Wushu06 7 年前

如果您使用的是FancyBox的v3,那么这是我的最佳解决方案。使用update()重新计算大小。

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

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

        }
    });