JSFiddle - React, Tailwind, and code Playground

by Andy Novocin

HTML

<p>test</p> 
   <div id="images">
        
    </div>

JavaScript

// Querystring, "tags" search term, comma delimited
var query = "http://www.flickr.com/services/feeds/photos_public.gne?tags=soccer&format=json";

// Ajax call to retrieve data, strange it calls jsonFlickrFeed, tried
// get a callback but throws an error
$.ajax({
   data:{format: "json"},
   dataType: "jsonp",
   url: query               
});

// This function is called once the call is satisfied
// http://stackoverflow.com/questions/13854250/understanding-cross-domain-xhr-and-xml-data
jsonFlickrFeed = function (data) {
    console.log("reached jsonFlickerFeed");
    
    // Start putting together the HTML string
    var htmlString = "";
     
    // Now start cycling through our array of Flickr photo details
    $.each(data.items, function(i,item){
     
        // I only want the ickle square thumbnails
        var sourceSquare = (item.media.m).replace("_m.jpg", "_s.jpg");
         
        // Here's where we piece together the HTML
        htmlString += '<li><a href="' + item.link + '" target="_blank">';
        htmlString += '<img title="' + item.title + '" src="' + sourceSquare;
        htmlString += '" alt="'; htmlString += item.title + '" />';
        htmlString += '</a></li>';
     
    });
     
    // Pop our HTML in the #images DIV
    $('#images').html(htmlString);
};