Flickr API photo search - 画像を拡大するには？

私はFlickr APIを使って写真の検索を行い、ページに画像を表示していますが、サムネイルサイズや極端に低い解像度が得られるようです。私は何を間違えているのですか？Flickr API photo search - 画像を拡大するには？

ここに私のコードです：

<html> 
<head> 
<title>Test App Project</title> 
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
<style type="text/css"> 

    .searchArea 
    { 
     height: 25%; 
    } 

    .cover-container { 
     height: 75%; 
     width: 100%; 
     white-space: nowrap; 
     overflow-x: hidden; 
     overflow-y: scroll; 
    } 

    .cover-item { 
     display:block; 
     /* 
     margin-top: 8px; 
     margin-bottom: 8px; 
     */ 
     margin: 25% 35% 25% 35%; 
     box-shadow: 2px 2px 4px #bbb; 
     border-top-right-radius: 4px; 
     width: auto; 
     height: auto; 
     vertical-align: bottom; 
     background-position: top left; 
     background-repeat: no-repeat; 
     background-size: cover; 
    } 

</style> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script> 


$(document).ready(function(){ 
    $('#button').click(function(){ 

     //Clear previous images 
     document.getElementById("results").innerHTML = ""; 

     var search_val = document.getElementById("search_field").value; 

     var apiurl_search = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=REDACTED&tags="+ search_val +"&safe_search=3"; 
     var src; 

     $.getJSON(apiurl_search + "&format=json&jsoncallback=?",function(data){ 
      $.each(data.photos.photo,function(i,myresult){ 

       src = "http://farm"+ myresult.farm +".static.flickr.com/" + myresult.server + "/" + myresult.id + "_" + myresult.secret +"_m.jpg"; 

       $("<img class='cover-item' />").attr("src", src).appendTo("#results"); 

       if (i == 24) return false; 
      }); 
     }); 
    }); 
}); 

</script> 
</head> 
<body> 
<div class="container"> 
    <div class="row searchArea"> 
     <div class="col-md-4"></div> 
     <div class="col-md-4"> 
      <div class="row"> 
       <div class="col-md-12"> 
        <h2>Test App Project</h2> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-md-1"></div> 
       <div class="col-md-10"> 
        <label for="search_field">Search: </label> 
        <input id="search_field" type="text"> 
       </div> 
       <div class="col-md-1"></div> 
      </div> 
      <div class="row"> 
       <div class="col-md-2"></div> 
       <div class="col-md-8"> 
        <button type="button" class="btn btn-success" id="button">Fetch Recent Photos</button> 
       </div> 
       <div class="col-md-2"></div> 
      </div> 
      <hr> 
     </div> 
     <div class="col-md-4"></div> 
    </div> 

    <div class="row-fluid"> 
     <div class="col-lg-12 col-md-10"> 
      <div id="results" class="cover-container"> 
      </div> 
     </div> 
    </div> 
</div> 
</body> 
</html>

出典

2016-12-11 Michael Anthony Leber

あなたのイメージ名の末尾に「_m」を持っているので、私はあなたが小型のサイズを返している見ることができるものから。 "_m"を "_c"に置き換えると、800x800のサイズになります。

画像IDごとに「flickr.photos.getSizes」を呼び出して、サイズを確認することができます。

src = "http://farm"+ myresult.farm +".static.flickr.com/" + myresult.server + "/" + myresult.id + "_" + myresult.secret +"_c.jpg";

上記動作するかどうか...と

src = "http://farm"+ myresult.farm +".static.flickr.com/" + myresult.server + "/" + myresult.id + "_" + myresult.secret +"_m.jpg";

...だから上記のコードでは、あなたが交換することによってこれをテストすることをお勧めしますhttps://www.flickr.com/services/api/flickr.photos.getSizes.html

- あなたはここでは例の応答を見ることができます私はすべての画像をチェックし、返されないものがある場合は、サイズを指定してから使用可能なサイズを見つけることができます。

出典

2016-12-12 15:23:14 Adam

これは機能します！私は実際のイメージを作成する方法についても考えていなかったAPI関数に非常に重点を置いていました。ありがとうございます!!!!! –

Flickr API photo search - 画像を拡大するには？

答えて

関連する問題