Изображения Flickr не отображаются в модале Colorbox
Я создал запрос 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);
1 ответ
Для создания цепочек, JQuery's 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 хочет выйти из iFrame, созданного ColorBox.)
Я добился большего успеха, используя прямую ссылку на изображение, но Flickr TOS может запретить это.
В соответствии с Принципами сообщества Flickr "на страницах других веб-сайтов, на которых размещен контент, размещенный на 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();
});
Редактировать:
Вот пример того, как добавить ссылку в заголовок ColorBox. Обратите внимание, что я не уверен, что это нарушает TOS 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');
}
});
});