Fancybox 3：自定义设置未生效问题求助

你遇到的核心问题是动态加载的内容没有被Fancybox正确初始化——因为你用load()异步加载了图片链接，而Fancybox默认只会在页面初始DOM加载完成后，对现有元素绑定事件和应用设置。当新的<a>标签被插入到页面时，Fancybox并没有自动检测到它们，自然你的自定义设置就不会生效。

下面是两种可靠的解决方法：

方法一：在load()的回调函数中初始化Fancybox #

load()方法支持传入一个回调函数，这个函数会在内容加载完成并插入到DOM后执行。我们可以在这里手动初始化Fancybox，并传入你的自定义设置：

$(document).ready(function() {
  $(".gallery").load("gallery/photos.php", function() {
    // 内容加载完成后，对新插入的图片链接初始化Fancybox
    $("[data-fancybox='images']").fancybox({
      // 这里放入你的自定义设置，示例：
      loop: true, // 开启循环浏览
      toolbar: true, // 显示工具栏
      buttons: ["zoom", "slideShow", "fullScreen", "close"], // 自定义工具栏按钮
      caption: function(instance, item) {
        // 自定义标题
        return $(this).attr('alt') || '图片';
      }
      // 更多设置可以根据你的需求添加
    });
  });
});

方法二：使用Fancybox的全局监听（推荐） #

Fancybox 3支持通过全局配置来自动处理动态添加的元素，你可以在页面初始加载时就设置全局配置，同时开启对DOM变化的监听：

$(document).ready(function() {
  // 全局配置Fancybox，自动监听动态添加的元素
  $.fancybox.defaults = {
    loop: true,
    buttons: ["zoom", "share", "slideShow", "fullScreen", "download", "thumbs", "close"],
    // 你的其他自定义设置...
  };

  // 加载图片内容
  $(".gallery").load("gallery/photos.php");
});

这种方式下，Fancybox会自动检测DOM中新增的带有data-fancybox属性的元素，无需手动重复初始化。

额外检查点 #

除了上述方法，你还需要确认以下几点：

• 确保你已经正确引入了Fancybox 3的CSS和JS文件，并且顺序是先引入jQuery，再引入Fancybox；
• 检查PHP输出的<a>标签是否正确，比如href和src属性的路径是否正确（避免404错误导致Fancybox无法正常工作）；
• 确认自定义设置的语法没有错误，比如是否遗漏了逗号、括号等。

内容的提问来源于stack exchange，提问作者zmrol