使用带有AJAX调用内容的fancybox

Question

试图获得一个带有我通过AJAX调用从Facebook加载的内容的fancybox弹出窗口。问题是链接在一个新窗口中打开，而不是弹出窗口。

我正在成功地绑定，我在同一页面中有一个参考图像，它与从Facebook成功获取数据时加载的脚本一起工作。这意味着剧本正在发挥作用，但图像仍然无法在fancybox中打开，但我真的不明白为什么即使成功了，它们也无法到达剧本。我错过了什么？

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

EDIT 2事实证明，如果我在href标记中输入"#"而不是指向Facebook的链接，fancybox会触发，但会显示"无法加载内容"错误消息。

EDIT 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'
});

UPDATE：代码片段中的工作示例

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>