Fancybox 画廊应用于域上的所有图像答案

【问题标题】：Fancybox gallery applied to all images on the domainFancybox 画廊应用于域上的所有图像
【发布时间】：2018-04-25 07:32:21
【问题描述】：

尝试使用此给定代码应用版本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 画廊创建者不提供处理所有图像链接的选项。

【问题讨论】：

标签： jquery image fancybox-3

【解决方案1】：

如果您希望 html 文件中的所有图像都应该是花式框，则此代码有效。

<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>

【讨论】：

hhhm。似乎不起作用。检查此页面中间的相机照片 - 2vsk.liepaja.edu.lv/blueprint.php 它仅适用于摄像机照片，因为我已将 data-fancybox 参数放入其中。
您将脚本放在头部，因此脚本在加载 html 文档之前运行。所以如果你把脚本放在头上，你必须这样写。 $(document).ready(function() { $("img").wrap(function() { return "<a href=" + this.src + " data-fancybox></a>"; }); });
谢谢。当脚本放置在标记中时，它可以工作了。不过有一件事。现在它适用于每个 img 实例，而我只需要带有标签的 img。另外，图像已将菜单中的文本移动到另一行。这里的例子 - 2vsk.liepaja.edu.lv/exp.php