Flickr Images Not Displaying in Colorbox Modal

Question

I have created a Flickr JSON request that returns a set of thumbnail images. Mousing over the thumbnails displays the title. However, I am trying to invoke a Colorbox modal when clicking on the thumbnail.

The Colorbox modal opens, however an image is not displayed. My guess is the DOM is not loaded prior to the click request, but I can not figure out how to resolve this (if indeed the DOM not being loaded yet is the issue).

Here is my code and 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

For chaining purposes, jQuery's wrap() returns the original set of elements, not the wrapped ones.

So, the way your code is currently written, colorbox() is added to the <img> rather than the <a>.

To fix this, I added parent() just before 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();

However, now the ColorBox opens with "This content failed to load." (My assumption is that Flickr wants to break out of the iFrame created by ColorBox.)

I had more success using a direct link to the image, but Flickr TOS might prohibit this.

Per the Flickr Community Guidelines "pages on other websites that display content hosted on flickr.com must provide a link from each photo or video back to its page on Flickr." Linking directly to the photo file doesn't do this.

You may need to include a link back to the Flickr page using a different method. For example, maybe you could add a visible/clickable link into the actual ColorBox content.

Here's an example using the direct image URL (fiddle below):

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

---

Edit:

Here's an example of how to add the link to the ColorBox title. Note that I am not sure whether this violates Flickr's 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/