Question

我使用fancybox3并建立了一个小画廊。当我通过单击打开缩略图时，它会按预期方式打开，但是当我使用向右箭头（“下一个按钮”）时，我会走大约2张图像，而不仅仅是1张。任何人都知道这可能是什么吗？

重要的HTML部分值得一提：

<head>
  ...
  <link rel="stylesheet" href="../css/jquery.fancybox.min.css">
</head>

<body>
  ...
  <main>
    ...
    <div>
      <a data-fancybox="gallery" href="../images/1.png" data-width="340">
        <img src="../images/1.png">
      </a>
      <a data-fancybox="gallery" href="../images/2.png" data-width="340">
        <img src="../images/2.png">
      </a>
      <a data-fancybox="gallery" href="../images/3.png" data-width="340">
        <img src="../images/3.png">
      </a>
    </div>
    <div class="invisibleGallery">
      <a data-fancybox="gallery" href="../images/4.png" data-width="340">
        <img src="../images/4.png">
      </a>
<!-- Now some more images -->
    </div>
  </main>
  <script src="../scripts/jquery-3.4.1.js"></script>
  <script src="../scripts/jquery.fancybox.min.js"></script>
  <script>
    if($(window).width() <= 500){
      $('[data-fancybox="gallery"]').fancybox({
        thumbs: {autoStart: false},
        slideShow: {autoStart: false, speed: 5000}
      });
    } else {
      $('[data-fancybox="gallery"]').fancybox({
        thumbs: {autoStart: true},
        slideShow: {autoStart: true, speed: 5000}
      });
    }
  </script> 
</body>

CSS：

@charset "utf-8";

* {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    color: #ccc;
}

body {
    background-image: url(../images/bg.png);
    background-repeat: no-repeat;
    background-size: auto 100vH;
    background-attachment: fixed;
    padding: 5%;
    height: 100vH;
    margin: 0 auto;
}

.invisibleGallery {
  display: none;
}

编辑：

啊，问题解决了……这是开发/分辨率更改模式本身。如果我只是用浏览器将其稍微推开就打开了它（以便CSS可以正常工作），则单击仅起作用一次，而不是两次。如果我使用CTRL + SHFT + M模式，它将触发两次...我在问自己为什么，但这是mozilla的问题

每次点击fancybox的“下一步”按钮2张图像

0 个答案: