Question

我创建了一个Flickr JSON请求，返回一组缩略图。将鼠标悬停在缩略图上会显示标题。但是，我在点击缩略图时尝试调用Colorbox模式。

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>。

要解决此问题，我在parent()之前添加了colorbox()：

 $("<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内容中添加可见/可点击的链接。

以下是使用直接图片网址（下面的小提琴）的示例：

$.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的服务条款。

$.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/

在Colorbox模式中不显示Flickr图像

1 个答案:

编辑：