JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<html> 
<head> 
<title>Flick Test</title>
</head> 
<body> 
<div id="flickr"></div>
</body> 
</html>

CSS

#flickr{
    width:340px;
    overflow:hidden;
    }
#flickr a{
    width:75px;
    float:left;
    margin:10px 10px 0 0;
    padding:0;
    border:0;    
    }

JavaScript

$(function(){       

    var id='49269824@N04';
    var limit ='20';

    // Flickr Photostream feed link.
    $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=" + id + "&lang=en-us&format=json&jsoncallback=?", 

    function(data){$.each(data.items, 

    function(i,item){

        // Number of thumbnails to show.            
        if(i < limit){

        // Create images and append to div id flickr and wrap link around the image.
        $("<img/>").attr("src", item.media.m.replace('_m', '_s')).appendTo("#flickr").wrap("<a href='" + item.media.m.replace('_m', '_z') + "' name='"+ item.link + "' title='" +  item.title +"'></a>");


        }

    }); 

    }); 

    });