Flickr API recherche de photos - Comment obtenir de plus grandes images?

J'utilise donc l'API Flickr pour faire une recherche de photos et montrer les images sur la page, mais il semble que chaque image que je reçois soit de la taille d'une vignette ou d'une résolution extrêmement basse; Qu'est-ce que je fais mal?Flickr API recherche de photos - Comment obtenir de plus grandes images?

link

Voici mon code:

<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>

Source

2016-12-11 Michael Anthony Leber

D'après ce que je peux vous voir retournez la taille des petits parce que vous avez « _m » à la fin de vos noms d'image. Essayez de remplacer le "_m" par "_c" et il devrait vous donner une taille 800x800.

Vous pouvez appeler "flickr.photos.getSizes" pour chaque ID d'image afin de vérifier que la taille est disponible. Vous pouvez voir un exemple de réponse ici - https://www.flickr.com/services/api/flickr.photos.getSizes.html

Ainsi, dans le code ci-dessus, vous pouvez tester ceci en remplaçant ...

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

avec ..

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

Si les travaux ci-dessus , Je voudrais vérifier toutes les images et si certains ne sont pas retournés, vous pouvez faire un appel de taille pour trouver disponible taille avant d'en spécifier un.

Source

2016-12-12 15:23:14 Adam

Cela fonctionne! Je me concentrais tellement sur la fonction API que je ne pensais même pas à la façon dont je créais l'image réelle. Merci !!!!! –

Flickr API recherche de photos - Comment obtenir de plus grandes images?

Répondre

Questions connexes