從靜態圖像URL中提取Flickr照片ID

這樣做的目標是自動添加歸因鏈接到博客文章中使用的圖像。我有一個demo set up here手動使用flickr.photos.getInfo在圖像上構建歸因網址。從靜態圖像URL中提取Flickr照片ID

爲此，我從CSS中的background-image拍攝了照片ID並創建了API調用。我想要自動從background-image網址中拉取照片ID（在此示例中爲），以在每篇文章中創建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>

我研究了等一幫和其他網站和我發現的其他解決方案都使用配置文件URL，而我需要使用靜態源URL。任何幫助表示讚賞。

來源

2014-09-23 Brian

我上述評論說，$.ajax呼叫不是爲我工作，但我可以使用jQuery的$.getJSON方法來解決它。 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圖像源發揮試試。在更改background-image中的源URL以使其更新信用點後，您可能需要刷新頁面。

來源

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 2014-09-23 20:41:49

對不起，它缺少參數contentType：「application/json; charset = utf-8」。 – 2014-09-23 20:53:31

不用擔心...你仍然指出我正確的軌道:-) – Brian 2014-09-23 20:59:55

從靜態圖像URL中提取Flickr照片ID

回答

相關問題