Line break after displaying all the photos of each album

user_16114515 0
Viewed 57

I'm getting images from Flickr using it's API. I'm displaying album name followed by it's corresponding pics and then the next album. Everything is going well but there needs to be a Linebreak after displaying all the photos of each album so that the name of next album will be displayed in next line. But currently name of the next album is being displayed right after the last photo of previous album. I've tried inserting div.append('break tag') in various places but none solved the issue. Please help. I've attached an image of how the page is looking now.

<html>
<body height="200" width="345">
<h2><div class="img-container" id="flickr"></div></h2>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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=13796773%40N04&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=13796773%40N04&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><a href="https://farm' + farmId + '.staticflickr.com/' + serverId + '/' + id + '_' + secret + '.jpg" target="_blank"><img style="border:1px solid #000000"  src="https://farm' + farmId + '.staticflickr.com/' + serverId + '/' + id + '_' + secret + '.jpg"/></a></center>');  // append images to album div
      }); 
    });
  });
});   
</script> 
</body>
</html>
<style>
img {max-height:125px; margin:3px; float: left; border:1px solid #dedede;} 
</style>

Here is how it looks

flickr css html jquery javascript
1 Answers

Use Style display:block

its Displays an element as a block element (like <p>). It starts on a new line, and takes up the whole width

img {max-height:125px; margin:3px; display:block float: left; border:1px solid #dedede;}

its Work

<html>
<body height="200" width="345">
<h2><div class="img-container" id="flickr"></div></h2>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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=13796773%40N04&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=13796773%40N04&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><a href="https://farm' + farmId + '.staticflickr.com/' + serverId + '/' + id + '_' + secret + '.jpg" target="_blank"><img style="border:1px solid #000000"  src="https://farm' + farmId + '.staticflickr.com/' + serverId + '/' + id + '_' + secret + '.jpg"/></a></center>');  // append images to album div
      }); 
    });
  });
});   
</script> 
</body>
</html>
<style>
img {max-height:125px; margin:3px; display:block float: left; border:1px solid #dedede;} 
</style>

user_96020370
Related