尝试获取一个 fancybox 弹出窗口,其中包含我通过 AJAX 调用从 Facebook 加载的内容。问题是链接在新窗口中打开,而不是弹出窗口。
我正在成功进行绑定(bind),并且在同一页面中有一个引用图像,该图像与从 Facebook 成功获取数据而加载的脚本一起使用。这意味着脚本正在运行,但图像仍然无法在 fancybox 中打开,但我无法真正弄清楚为什么即使成功,它们也无法访问脚本。我错过了什么?
编辑:我尝试了一些警报,发现警报在脚本之前和之后弹出,但图像没有出现在网站上,直到整个循环完成并且脚本没有出现在那之后不要跑。猜测我需要在图像加载到页面上后绑定(bind) .fancybox-thumb 项目才能工作。尝试了complete: 函数,但它也在加载图像之前运行。
编辑 2 事实证明,如果我在 href 标签中放入“#”而不是 Facebook 的链接,fancybox 会触发,但会给出“内容无法加载”的错误消息。
编辑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>
最佳答案
这是因为图像的 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
类型:)
关于jquery - 将 fancybox 与来自 AJAX 调用的内容结合使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37808029/