JSFiddle - React, Tailwind, and code Playground

by csornmo

HTML

<div class="flicker flicker-desktop">
</div>

CSS

.flicker-image {
    height: 250px!important;
    width: 100px;
    display: inline-block;
    background-color: #eee;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

JavaScript

var endpoint = "https://api.flickr.com/services/rest/";
var apiKey = "12a59237f5dd5b99da7e7ad8e85b71d9";
var group_id = "3663600@N22";
var extras = "url_sq,url_t,url_s,url_m,url_o";
var method = "flickr.groups.pools.getPhotos";
var per_page = 5;


var request = endpoint+"?method="+method+
    "&api_key="+apiKey+
    "&group_id="+group_id+
    "&per_page="+per_page+
    "&extras="+extras+
    "&format=json&jsoncallback=?";
$.getJSON(request,buildGallery);

function buildGallery(data,result){
  if(result=="success"){
    var photos = data.photos.photo;

    for(var i=0; i<photos.length; i++){
      var link =  'https://www.flickr.com/photos/flickr-s/' + data.photos.photo[i].id + '/in/pool-' +  group_id;

    	console.log(link);
      
      $('<a href="' + link + '" target="_blank" class="flicker-image">').css("background-image", "url('" + photos[i].url_m + "')").appendTo(".flicker");
    }
  }
}