$(function () {

    // This example uses the Fliclr API to return JSON data to retrieve
    // image data.
  
    // Flickr API URL.
    // NOTE the additional parameter ?jsoncallback on the end of the url to avoid the 
    // cross origin error.  This allows you to retrieve data from servers with a different
    // domain name to your own.
    var ApiUrl = "https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
  
    // Use getJSON() function with data to define the Flickr parameters.
    $.getJSON(ApiUrl, {
      tags: "winter",
      tagmode: "any",
      format: "json"
    }).done(function(data) {  // Process the data if successful

      console.log(data);  // Display data for debugging

      // Loop around the array of returned data.
      $.each(data.items, function(index, item) {   

            //console.log(item);

            $('.result').append (
                `<div class="col-sm-6 col-md-4 col-lg-3">
                    <h5><a href="${item.link}" target="_blank">${item.title}</a></h5>
                    <div class="img-box">
                        <img src="${item.media.m}"
                        class="img-fluid img-thumbnail border rounded"
                        style="max-width:100%; height:auto"
                        alt="${item.title}" />
                    </div>
                </div>`                
            );
 
            // This is used to stop the loop after a defined number of images.
            if (index == 19) {
            return false;
        }

      });
    }).fail(function(response) {  // Handle any errors that may have occurred.
      console.log(response);
    });
  
  });