JSFiddle - React, Tailwind, and code Playground

by csornmo

HTML

<div id="links"></div>

JavaScript

$.ajax({
    url: (window.location.protocol === 'https:' ? 'https://secure' : 'http://api') + '.flickr.com/services/rest/',
    data: {
        format: 'json',
        method: 'flickr.groups.pools.getPhotos',
        api_key: '12a59237f5dd5b99da7e7ad8e85b71d9',
        group_id: '3663600@N22'
    },
    dataType: 'jsonp',
    jsonp: 'jsoncallback'
}).done(function (result) {
    var linksContainer = $('#links'),
    baseUrl;

    // Add the demo images as links with thumbnails to the page:
    $.each(result.photoset.photo, function (index, photo) {
        baseUrl = 'http://farm' + photo.farm + '.static.flickr.com/' + photo.server + '/' + photo.id + '_' + photo.secret;
       $('<a/>').append($('<img>Click to load remote image from Flickr</img>').prop("src", baseUrl + "_s.jpg"))
        .prop('href', baseUrl + '_b.jpg')
        .prop('title', photo.title)
        .attr('data-gallery', '')
        .appendTo(linksContainer);
    });
});