I am successfully using Colorbox in the Views 'Rewrite Results" field (with tokens) for external links using: <a class="colorbox-load" [field_url]?width=520&height=300&iframe=true">Site</a>.

However, I created a script that is run in Views 'Rewrite Results' field for a Flickr JSON request that returns a set of thumbnail images. Clicking on the thumbnail should open the Colorbox modal and display the image.

I have this working in a FIDDLE.

However, Colorbox does not open in Drupal. My guess is drupal doesn't like the .colorbox() function, or I need to add class="colorbox-load" somewhere outside the .wrap function. But I have not been able to figure out where/how. How can I invoke Colorbox in this script, or what is the proper syntax for Drupal?

Your help is greatly appreciated. Here is the code:

<script type="text/javascript">

(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)
            var link_back = "https://www.flickr.com/photos/" + item.owner + "/" + item.id + "?width=1020&height=500&iframe=true" + "/";
            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');
                }
            });
        });
    });
});
})(jQuery);
</script>
<div id="images"></div>

Comments

narkoff’s picture

Issue summary: View changes
narkoff’s picture

Issue summary: View changes
Neslee Canil Pinto’s picture

Status: Active » Closed (cannot reproduce)