Question

我正在使用fancybox 3.3.5，并且设置了一些选项，但它们似乎并不适用。这是我的HTML / CSS：

HTML（编辑包括CDN和占位符图像以进行测试）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css" />

<body>
  <div class="container">
    <div class="row">
      <div class="gallery_product col-lg-4 col-md-6 col-sm-6 col-xs-12 ">
        <a href="http://via.placeholder.com/350x150" data-fancybox="gallery">
                <img src="http://via.placeholder.com/360x150" width="360" />
            </a>
      </div>
    </div>
  </div>
</body>

选项：

<script type="text/javascript">
    $(document).ready(function() {
        $(".gallery").fancybox({
            defaults = {
                loop: true,
                gutter: 25,
                buttons: [
                    "fullScreen",
                    "download",
                    "thumbs",
                    "close"
                ],
                idleTime: 10,
            }
        });
    });
</script>

Answer 1

您只需要用正确的选择器替换$(".gallery")，因为该选择器将不返回任何元素，并且将应用默认值。

因此，将$(".gallery")更改为$('[data-fancybox="gallery"]')

FancyBox 3.3.5选项不适用

1 个答案: