Comment afficher les images Flickr via l'API dans une galerie justifiée?

Question

Je dois utiliser la galerie Miromannino Justified (http://miromannino.github.io/Justified-Gallery/) mais j'en ai besoin pour afficher les images récupérées sur Flickr.

J'obtenu le code vers le bas pour retreiving les photos de Flickr via l'API en utilisant Ajax:

$.ajax({ 
     url: "https://api.flickr.com/services/rest/", 
     data: { 
      method: "flickr.photos.search", 
      api_key: "671aab1520e2cb69e08dd36a5f40213b", 
      tags: "beach,fashion", 
      format: "json", 
      nojsoncallback: 1 
     }, 
     success: function (response) { 
      $.each(response.photos.photo, function (index, value) { 
       $("#mygallery").append("<div><img src='http://farm" + value.farm + ".staticflickr.com/" + value.server + "/" + value.id + "_" + value.secret +".jpg'></div>"); 
      }) 
     } 
    }); 

Mais je ne comprends pas comment ajouter dans la galerie Justifié. JustifiedGallery s'attend à ce que chaque image soit enveloppée dans une balise <a>

Answer 1

Enfin, vous devez appeler le .justifiedGallery() à la fin. Voici le code modifié:

$.ajax({ 
    url: "https://api.flickr.com/services/rest/", 
    data: { 
     method: "flickr.photos.search", 
     api_key: "671aab1520e2cb69e08dd36a5f40213b", 
     tags: "beach,fashion", 
     format: "json", 
     nojsoncallback: 1 
    }, 
    success: function (response) { 
     $.each(response.photos.photo, function (index, value) { 
      console.log(value); 
      var url = 'http://farm' + value.farm + '.staticflickr.com/' + value.server + '/' + value.id + '_' + value.secret + '.jpg'; 
      var a = $('<a>').attr({href: url}); 
      var img = $('<img>').attr({src: url}); 
      a.append(img); 
      $("#mygallery").append(a); 
     }); 
     $('#mygallery').justifiedGallery(); 
    } 
}); 

Et ici, il est en action: https://jsfiddle.net/tghw/raf1m6bL/