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 打开时显示“无法加载此内容”。 （我的假设是 Flickr 想要突破由 ColorBox 创建的 iFrame。）

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

根据Flickr Community Guidelines“其他网站上显示的页面 flickr.com 上托管的内容必须提供每张照片的链接或 视频回到 Flickr 上的页面。” 直接链接到照片文件 不这样做。

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

这是一个使用直接图片 URL 的示例（如下图所示）：

$.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();

});

Working Example (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/