Hello there! I'm facing a little challenge with inserting a line break after each image that loads from the Flickr API. It's tricky to manipulate the style of data that hasn't loaded in the browser yet.
I've experimented with using the
tag within the "images" div in my HTML code. I've also tried tweaking the JavaScript when making the call to the Flickr API function.
<body>
<div class="navbar">
<input type="text" id="content">
<button id="submit", type="submit" class="button">GO!</button>
</div>
<div class="container">
<div id="images">
<p>This is where the 25 pictures are loaded.
They load horizontally and move to the next
line when there is not enough room.
I would like a line break <br> after each image.</p>
</div>
</div>
<!--script-->
<script>
$(document).ready(function () {
$("#submit").click(function (event) {
var searchVal = $("#content").val();
var flickrAPI = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=//KEY_GOES_HERE&nojsoncallback=1";
$.getJSON( flickrAPI, {
tags: searchVal,
per_page: 25,
//safeSearch
safe_search: 1,
format: "json"
},
function( data ) {
$('#images').empty();
$.each( data.photos.photo, function( i, item ) {
var url = 'https://farm' + item.farm + '.staticflickr.com/' + item.server + '/' + item.id + '_' + item.secret + '.jpg';
$('#images').append('<img src="' + url + '"/>');
});
});
});
});
</script>
</body>
</html>
When the user clicks "GO!", 25 pictures load into the "images" div. Each picture currently stacks horizontally before a line break
is applied.