Извлечь идентификатор фотографии Flickr со статического изображения URL

Целью является автоматическое добавление ссылки на изображение, используемое в сообщении в блоге. У меня есть demo set up here, который вручную использует flickr.photos.getInfo для создания URL-адреса атрибуции на изображении.Извлечь идентификатор фотографии Flickr со статического изображения URL

Для этого я взял идентификатор фотографии с background-image в CSS и создал вызов API. То, что я хотел бы сделать, автоматически вытащил идентификатор фотографии (для этого примера) с URL-адреса background-image, чтобы создать вызов API для каждого сообщения.

CSS

.featured { 
background-image:url('https://farm3.staticflickr.com/2613/3990985751_7ca0769f15_b.jpg'); 
}

HTML

<div class="featured"> 
<body> 
    <div class="featured"> 
     <div id="featured-credit"> 
     <p id="credits"></p> 
     </div> 
    </div> 
    </div>

JQuery/JS

// Builds the URL to link in the image credit 
     function jsonFlickrApi (response) { 
     $("#credits").html('<a href="http://www.flickr.com/photos/'+response.photo.owner.nsid+'/'+response.photo.id+'/" target="blank">'+response.photo.title._content+"</a>"); 
     } 

     // removes the CSS formatting for the featured image background URL 
     function extractUrl(input) { 
     return input.replace(/"/g,"").replace(/url\(|\)$/ig, ""); 
     } 

    /* After all the scripts are loaded, send the featured photo to the Flickr API to get the JSON data */ 
    <script src="https://api.flickr.com/services/rest/?method=flickr.photos.getInfo&api_key=APIKEYHERE&photo_id=3990985751&format=json&jsoncallback=?"></script>

Я исследовал кучу на SO и другие сайты и другие найденные мной решения - все используют URL профиля, тогда как мне нужно использовать статический URL-адрес источника. Любая помощь приветствуется.

источник

2014-09-23 Brian

я заметил выше, что $.ajax вызов не работает для меня, но я был в состоянии решить эту проблему с помощью метода $.getJSON JQuery в. JS только ниже:

// removes the CSS formatting for the featured image background URL 
     function extractUrl(input) { 
     return input.replace(/"/g,"").replace(/url\(|\)$/ig, ""); 
     }; 

     //Set a variable to hold the extracted URL & pass the string to the next function 
     bg = extractUrl($(".featured").css("background-image")) 
     extractPhotoId(); 

     // This *really* ugly Regex pulls out the photo ID from the extracted URL and saves it in a variable 
     function extractPhotoId() { 
     photoId = bg.replace(/(.+\.[a-z]{2,4})\/(\d{3,5})\/(\d{7,15})(?:(?!ab).)*/ig, '$3'); 
     } 

     // Constructed API url to use with the JSON request 
     var apiUrl = "https://api.flickr.com/services/rest/?method=flickr.photos.getInfo&api_key=c8c95356e465b8d7398ff2847152740e&photo_id=" + photoId + "&format=json&jsoncallback=?"; 

     // Call the Flickr API URL and apply the data to the source credit div 
     $.getJSON(apiUrl, function(data){ 
      $("#credits").html('<a href="http://www.flickr.com/photos/'+data.photo.owner.nsid+'/'+data.photo.id+'/" target="blank">'+data.photo.title._content+"</a>"); 
     });

Вот рабочий CodePen demo, если вы хотите играть с источником изображения в CSS, чтобы попробовать его. Возможно, вам придется обновить страницу после изменения исходного URL-адреса в background-image, чтобы получить его, чтобы обновить кредит.

источник

2014-09-23 20:46:17 Brian

Вы пробовали сделать ajax звонок мерцания?

$.ajax({ 
    url: "https://api.flickr.com/services/rest/", 
    type: 'GET', 
    contentType: "application/json;charset=utf-8", 
    data:{ 
     method: 'flickr.photos.getInfo', 
     api_key: 'c8c95356e465b8d7398ff2847152740e', 
     format: 'json', 
     photo_id: yourPhotoID, 
    }, 
    success: function(data){ 
     //data is the response from flickr 
    } 
});

источник

2014-09-23 19:33:50

Я не мог заставить это работать и не смог понять, почему код 'success' не стрелял, хотя API был вызван успешно. Вместо этого я использовал метод '$ .getJSON'. – Brian

К сожалению, в нем отсутствовал параметр contentType: «application/json; charset = utf-8». –

Не беспокойся ... ты все еще указал мне на правильный путь :-) – Brian

Извлечь идентификатор фотографии Flickr со статического изображения URL

ответ

Смежные вопросы