Flickr图片未以Colorbox模式显示

Question

我创建了一个Flickr JSON请求，该请求返回一组缩略图。将鼠标悬停在缩略图上可显示标题。然而，我试图在单击缩略图时调用Colorbox模态。

颜色框模式将打开，但不会显示图像。我的猜测是在点击请求之前没有加载DOM，但我不知道如何解决这个问题(如果确实还没有加载DOM的话)。

这是我的代码和FIDDLE

(function ($) {
$(document).ready(function () {
var url = ["https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=a66ae3b787a9d02a3da0f2b63ac621be&tag_mode=all&text=[title]&sort=date-taken-desc&group_id=47259259@N00&extras=description%2Cdate_taken%2Ctags%2Cowner_name%2Curl_q&per_page=500&page=1"];
var src;
var a_href;
for (var i=0;i<url.length;i++)
//SEND API CALL AND RETURN RESULTS TO A FUNCTION
$.getJSON(url[i] + "&format=json&nojsoncallback=1", function (data) {
//LOOP THROUGH DATA
$.each(data.photos.photo, function (i, item) {
//LINK TO IMAGE PAGE (REQUIRED BY FLICKR TOS)
a_href = "https://www.flickr.com/photos/" + item.owner + "/" + item.id + "?width=1020&height=500&iframe=true" + "/";
//PLACE IMAGE IN IMAGES TAG AND APPEND TO IMAGES DIV  
$("<img/>").attr("src", item.url_q).attr("title", item.title).attr("datetaken", item.datetaken).appendTo("#images").wrap('<a  href="' + a_href + '" name="' + item.link + '" title="' + item.title + '" target="external"></a>').colorbox();
});
});
});

})(jQuery)；

Answer 1

为了链接的目的，jQuery的wrap()返回原始元素集，而不是包装的元素集。

因此，按照当前编写代码的方式，colorbox()被添加到<img>而不是<a>。

为了解决这个问题，我在colorbox():之前添加了parent()

$("<img/>").attr("src", item.url_q)
.attr("title", item.title)
.attr("datetaken", item.datetaken)
.appendTo("#images")
.wrap('<a  href="' + a_href + '" name="' + item.link + '" title="' + item.title + '" target="external"></a>')
.parent().colorbox();

然而，现在ColorBox打开时显示"Thiscontentfailedload."(我的假设是Flickr想要突破ColorBox创建的iFrame。)

我使用直接链接到图片取得了更大的成功，但Flickr TOS可能会禁止这样做。

根据Flickr社区指南"页面在其他网站上显示flickr.com上托管的内容必须提供每张照片的链接，或者视频返回Flickr上的页面。"直接链接到照片文件不要这样做。

您可能需要使用其他方法包含一个返回Flickr页面的链接。例如，您可以在实际的ColorBox内容中添加一个可见/可点击的链接。

下面是一个使用直接图像URL的例子(下面是fiddle)：

$.each(data.photos.photo, function (i, item) {
// direct link to the image
a_href = item.url_q.replace('_q', '_z');
// Build image, wrap with href, preform colorbox() on href.
$("<img/>").attr("src", item.url_q)
.attr("title", item.title)
.attr("datetaken", item.datetaken)
.appendTo("#images")
.wrap('<a  href="' + a_href + '" name="' + item.link + '" title="' + item.title + '" target="external"></a>')
.parent().colorbox();
});

工作示例(jsFiddle)

---

编辑：

下面是一个如何将链接添加到ColorBox标题的示例。请注意，我不确定这是否违反了Flickr的TOS。

$.each(data.photos.photo, function (i, item) {
//LINK TO IMAGE PAGE (REQUIRED BY FLICKR TOS)
var link_back="https://www.flickr.com/photos/" + item.owner + "/" + item.id + "?width=1020&height=500&iframe=true" + "/";
// direct image url
a_href = item.url_q.replace('_q', '_z');
//PLACE IMAGE IN IMAGES TAG AND APPEND TO IMAGES DIV  
$("<img/>").attr("src", item.url_q)
.attr("title", item.title)
.attr("datetaken", item.datetaken)
.appendTo("#images")
.wrap('<a  href="' + a_href + '" name="' + item.link + '" title="' + item.title + '" target="external"></a>')
.parent().colorbox({
title:function () {
return $((this.title).link(link_back)).attr('target', '_blank');
}
});
});

http://jsfiddle.net/ST5hY/5/