将 fancybox 与来自 AJAX 调用的内容一起使用

Question

正在尝试使用 AJAX 调用从 Facebook 加载的内容获取花式框弹出窗口。问题是 link 在新的 window 而不是弹出窗口中打开。

我正在成功进行绑定，我在同一页面中有一个参考图像，该图像与从 Facebook 成功获取数据时加载的脚本一起使用。这意味着脚本正在运行，但图像仍然无法在 fancybox 中打开，但我真的不明白为什么即使成功也无法访问脚本。我错过了什么？

编辑： 我用警报进行了一些试验，发现警报在脚本前后弹出，但图像直到整个循环完成后才出现在网站上完成后脚本没有运行。猜测我需要在图像加载到页面上后绑定 .fancybox-thumb 项目才能工作。尝试了 complete: 函数，但它运行在图像加载之前也被加载了。

编辑 2 如果我在 href 标签中放置“#”而不是 link 到 Facebook，fancybox 触发但给出 "the content cannot be loaded"错误信息。

编辑 3 阅读 fancybox，它说它支持添加的异步项目，但我不知道为什么它仍然不起作用

$(document).ready(function () {
    $(".fancybox-thumb").fancybox({
         helpers: {
         title: { type: 'inside' },
         buttons: {},
         type: 'iframe',
         thumbs: { width: 50, height: 50 },
         overlay: { locked: false }
         }
    });         
 });

var accessToken = "XXX";
        var postsURL = "https://graph.facebook.com/ALBUMID/photos/?fields=name,link&access_token=" + accessToken;

        $.ajax({
            url: postsURL,
            method: 'GET',
            dataType: "jsonp",
            success: function (data) {
                for (var i = 0; i <= data.data.length - 1; i++) {
                    var Description = ""

                    if (data.data[i].name != null) {
                        Description = data.data[i].name
                    }

                    var div = $("<div class='facebookimage'><a class='fancybox-thumb' href='https://graph.facebook.com/" + data.data[i].id.toString() + "/picture?type=normal" + "' rel='fancybox-thumb' title='" + Description + "'><img src='https://graph.facebook.com/" + data.data[i].id + "/picture?type=normal' /></a></div>");
                    div.appendTo($("#AlbumFeed"));

                }
            },
            error: function (status) {
                console.log("Facebook data could not be retrieved. Failed with a status of " + status);
            }
        });  



HTML:

<div id="AlbumFeed"></div>

Answer 1

这是因为 url 您的图像不包含图像文件扩展名...尝试像这样将 fancybox 类型强制设置为 iframe...

$(".fancybox-thumb").fancybox({
  type: 'image'
});

更新：代码片段中的工作示例

var accessToken = "XXX";
var postsURL = "https://graph.facebook.com/ALBUMID/photos/?fields=name,link&access_token=" + accessToken;

$.ajax({
  url: postsURL,
  method: 'GET',
  dataType: "jsonp",
  success: function(data) {
    for (var i = 0; i <= data.data.length - 1; i++) {
      var Description = ""

      if (data.data[i].name != null) {
        Description = data.data[i].name
      }

      var div = $("<div class='facebookimage'><a class='fancybox-thumb' href='https://graph.facebook.com/" + data.data[i].id.toString() + "/picture?type=normal" + "' rel='fancybox-thumb' title='" + Description + "'><img src='https://graph.facebook.com/" + data.data[i].id + "/picture?type=normal' /></a></div>");
      div.appendTo($("#AlbumFeed"));
    }
    $(".fancybox-thumb").fancybox({
      type: 'image',
      helpers: {
        title: {
          type: 'inside'
        },
        buttons: {},
        thumbs: {
          width: 50,
          height: 50
        },
        overlay: {
          locked: false
        },
      }
    });

  },
  error: function(status) {
    console.log("Facebook data could not be retrieved. Failed with a status of " + status);
  }
});

* {
  max-width: 100%;
}

.facebookimage {
  display: inline-block;
  width: 30%;
}

.fancybox-thumb {
  display: block;
}

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Fancybox -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script>

<!-- Fancybox Thumbs -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.js"></script>

<!-- HTML Starts Here -->
<div id="AlbumFeed"></div>

感谢@JFK 建议 image 输入 :)

Answer 2

我不确定你在哪里得到了 fancybox 代码的配置，但这就是给你带来所有麻烦的原因。

fancybox 构造函数没有 helpers 选项，您错过了那里的 type: 'iframe'。

这是可以使用的新代码。

$(document).ready(function () {
  $(".fancybox-thumb").fancybox({
    type: 'iframe'
  }); 
});

var accessToken = "EAAWGDX5GyuwBAPokOnZBgTHZBwlIxZAVkw8cI2SD8SteVZBNmQ5EK9X2T7AWJpBs1ZAdbpLoL37IkT9yfyurooz5RygEp7ZBFF67MLLprxCy25wZBNSYh1HCKsx8Pgc0EAx7jmPzq7Yi4JNG1jEHR9mpHZCsZCxgcGoGAoNvX7tv6VwZDZD";
var postsURL = "https://graph.facebook.com/552189621541312/photos/?fields=name,link&access_token=" + accessToken;

$.ajax({
  url: postsURL,
  method: 'GET',
  dataType: "jsonp",
  success: function (data) {
    for (var i = 0; i <= data.data.length - 1; i++) {
      var Description = ""

      if (data.data[i].name != null) {
        Description = data.data[i].name
      }

      var div = $("<div class='facebookimage'><a class='fancybox-thumb' href='https://graph.facebook.com/" + data.data[i].id.toString() + "/picture?type=normal" + "' rel='fancybox-thumb' title='" + Description + "'><img src='https://graph.facebook.com/" + data.data[i].id + "/picture?type=normal' /></a></div>");
      div.appendTo($("#AlbumFeed"));
    }
  },
  error: function (status) {
    console.log("Facebook data could not be retrieved. Failed with a status of " + status);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>

<div id="AlbumFeed"></div>

将 fancybox 与来自 AJAX 调用的内容一起使用

Using fancybox with content from AJAX call

ajax

jquery

fancybox