Europeana API demo - display thumbnails with jQuery

See https://pro.europeana.eu/post/using-jquery-with-the-europeana-api for more details

by jamesinealing

HTML

<div id="content"></div>

CSS

.thumbnail {
    display:block;
    float:left;
}
img {
      max-width:160px;
    max-height:160px;
}

JavaScript

var apiCall = 'https://www.europeana.eu/api/v2/search.json?wskey=api2demo&query=Roger%20Fenton&start=1&rows=24&profile=rich&theme=photography';
// rerplace wskey with your own API key available from https://pro.europeana.eu/get-api

$.getJSON(apiCall, function (json) {
    // here we will do something with the response
    var totalcount = json.totalResults;
    var counthtml = '<h2>Total results: ' + totalcount + '</h2>';
    $('#content').append(counthtml);
    $.each(json.items, function (i, item) {
        var title = item.title;
        var link = item.guid;
        var thumbnail = item.edmPreview;
        var objecthtml = '';
        objecthtml += '<a href="' + link + '" class="thumbnail" title="' + title + '" target="_blank"><img src="' + thumbnail + '" alt="' + title + '"></a>';
        $('#content').append(objecthtml);
    });
});