Search code examples
htmljqueryflickr

Flickr API displaying all album names at once

So I've asked a similar question earlier but got no responses. After an hour of hassle, I came with an another approach. But I'm facing the same issue again. I'm successful getting all the album names and all the photos. But the problem is that all the album names are being displayed at once and later all the photos. I want to display like album name and it's corresponding photos and then another album. I don't know what I'm doing wrong. Please help.

<html>
<body height="400" width="345">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var settings = {
  "async": true,
  "crossDomain": true,
  "url": "https://www.flickr.com/services/rest/?method=flickr.photosets.getList&api_key=d4484e060a112d188a27a51ea64f427e&user_id=193275648%40N03&format=json&nojsoncallback=1",
  "method": "GET",                                               } 
$.ajax(settings).done(function (data) {
  console.log(data);
// $("#galleryTitle").append(data.photos.photo[0].title + " Gallery");
$.each( data.photosets.photoset, function( i, gp ) {
$("#albumname").append(data.photosets.photoset[i].title._content + " Gallery");
 var id = gp.id; 
 var settings1 = {
  "async": true,
  "crossDomain": true,
  "url": "https://www.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=d4484e060a112d188a27a51ea64f427e&photoset_id="+ id +"&user_id=193275648%40N03&format=json&nojsoncallback=1",
  "method": "GET",                                               } 
$.ajax(settings1).done(function (data) {
  console.log(data);
$.each( data.photoset.photo, function( i, gpr ) {
var farmId = gpr.farm;
var serverId = gpr.server; 
var id = gpr.id; 
var secret = gpr.secret;
console.log(farmId + ", " + serverId + ", " + id + ", " + secret);
//  https://farm{farm-id}.staticflickr.com/{server-id}/{id}_{secret}.jpg
$("#flickr").append('<center><img style="border:1px solid #000000"  src="https://farm' + farmId + '.staticflickr.com/' + serverId + '/' + id + '_' + secret + '.jpg"/><br><br></center>');
});
}); 
 });
 }); 
 </script>
<!-- <h2><div id="galleryTitle"></div></h2> -->
<h2><div id="albumname"></div></h2>
<div id="flickr"/>
</body>
</html> 
<style>
img{
width: auto;
height: 80%;
max-width: 100%;

overflow: hidden;
 border-width: 1px;
    border-color: Black;
padding: 5px;
}
</style>

JSON response of first API call

{"photosets":{"page":1,"pages":1,"perpage":500,"total":1,"photoset":[{"id":"72157719443542617","owner":"193275648@N03","username":"kasindimahesh","primary":"51258562023","secret":"dba1214e96","server":"65535","farm":66,"count_views":"0","count_comments":"0","count_photos":2,"count_videos":0,"title":{"_content":"fff"},"description":{"_content":""},"can_comment":0,"date_create":"1624162691","date_update":"1624172423","photos":2,"videos":0,"visibility_can_see_set":1,"needs_interstitial":0}]},"stat":"ok"}

JSON response of second API call

{"photoset":{"id":"72157719443542617","primary":"51258562023","owner":"193275648@N03","ownername":"kasindimahesh","photo":[{"id":"51258562023","secret":"dba1214e96","server":"65535","farm":66,"title":"WhatsApp Image 2021-06-07 at 17.15.56","isprimary":"1","ispublic":1,"isfriend":0,"isfamily":0},{"id":"51259309294","secret":"c2f246caf7","server":"65535","farm":66,"title":"WhatsApp Image 2021-06-05 at 16.34.10","isprimary":"0","ispublic":1,"isfriend":0,"isfamily":0}],"page":1,"per_page":500,"perpage":500,"pages":1,"title":"fff","total":2},"stat":"ok"}

Solution

  • If I understood correctly, you want to show the album title and then the images from that album. Right?

    Then you need to append the title/images successively in the same wrapping element, not in two different elements.

    var settings = {
  "async": true,
  "crossDomain": true,
  "url": "https://www.flickr.com/services/rest/?method=flickr.photosets.getList&api_key=d4484e060a112d188a27a51ea64f427e&user_id=193275648%40N03&format=json&nojsoncallback=1",
  "method": "GET",
}
const flickr = $("#flickr");  // the wrapping div, where all albums divs will be appended
$.ajax(settings).done(function(data) {
  $.each(data.photosets.photoset, function(i, gp) {
    const div = $("<div/>");  // a div for each album
    flickr.append(div);
    const albumname = $("<h2/>");  // headline for the album
    albumname.text(gp.title._content + " Gallery");
    div.append(albumname);
    var id = gp.id;
    var settings1 = {
      "async": true,
      "crossDomain": true,
      "url": "https://www.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=d4484e060a112d188a27a51ea64f427e&photoset_id=" + id + "&user_id=193275648%40N03&format=json&nojsoncallback=1",
      "method": "GET",
    }
    $.ajax(settings1).done(function(data) {
      $.each(data.photoset.photo, function(i, gpr) {
        var farmId = gpr.farm;
        var serverId = gpr.server;
        var id = gpr.id;
        var secret = gpr.secret;
        div.append('<center><img style="border:1px solid #000000"  src="https://farm' + farmId + '.staticflickr.com/' + serverId + '/' + id + '_' + secret + '.jpg"/><br><br></center>');  // append images to album div
      });
    });
  });
});
    img {
  width: auto;
  height: 80%;
  max-width: 100%;
  overflow: hidden;
  border-width: 1px;
  border-color: Black;
  padding: 5px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="flickr"></div>