Question

尝试使用以下代码应用版本3 of fancybox：

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

我尝试过这个解决方案：

$('a').each(function () {
if ($(this).has('img')) {
    $(this).fancybox();
}

}）;

我还尝试了许多其他解决方案，包括stackoverlow。它似乎没有用。我不希望手工完成所有链接。原始fancybox图库创建者不提供处理所有图像链接的选项。

Answer 1

如果您希望html文件中的所有图像都是fancybox，则此代码可以正常工作。

<html>
<body>
  <img src="./img/img-small-1.jpg" alt="">
  <img src="./img/img-small-2.jpg" alt="">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css" />      
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>
  <script>
    $("img").wrap(function() {
      return "<a href=" + this.src + " data-fancybox></a>";
    });
  </script>
</body>
</html>

但是大多数fancybox都会在html文件中添加到你的图像中（不在脚本文件中）

  <a href="./img/img-small-1.jpg" data-fancybox="gallery"><img src="./img/img-small-1.jpg" alt=""></a>
  <a href="./img/img-small-2.jpg" data-fancybox="gallery"><img src="./img/img-small-2.jpg" alt=""></a>

Fancybox图库适用于域中的所有图像

1 个答案: