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
Comment #1
narkoff CreditAttribution: narkoff commentedComment #2
narkoff CreditAttribution: narkoff commentedComment #3
Neslee Canil Pinto