JSFiddle - React, Tailwind, and code Playground

by serio

HTML

<div class="gallery"></div>
<a class="more" href="#">more...</a>

JavaScript

var howMany = 10;
var hash = window.location.hash;
var apiKey = 'c5a9d05530b2663d23b7f2961129b49c';
var setID = '72157639116344954';
var user_id = '22674099@N08'

function getImages(page) {
    var page = page;
    var apiCall = 'http://api.flickr.com/services/rest/?format=json&method=flickr.photosets.getPhotos&photoset_id=' + setID + '&per_page=' + howMany + '&page=' + page + '&user_id=' + user_id + '&api_key=' + apiKey + '&jsoncallback=?';
    $.getJSON(apiCall, function (data) {
        $.each(data.photoset.photo, function (i, photo) {
            var img = $('<img>');
            var a = $('<a>');
            var loc = 'http://farm' + photo.farm + '.static.flickr.com/' + photo.server + '/' + photo.id + '_' + photo.secret;

            img.attr('src', loc + '_s.jpg');
            a.attr({
                'href': loc + '.jpg',
                    'target': '_blank'
            });

            img.appendTo(a);
            a.appendTo('.gallery');
        });
        console.log(data.photoset.pages);
        console.log(page);
        if (data.photoset.pages > page) {
            $('.more').unbind().click(function (e) {
                e.preventDefault();
                page++;
                getImages(page);
            });
        } else {
            $('.more').hide();
        }
    });
}

getImages(1);