Getty Images API Creative Image Search

by Mark Pitman

HTML

<input style="width:50%" type="text" id="apikey" placeholder="Api-Key" value=""><br>
<input style="width:50%" type="text" id="phrase" placeholder="Phrase" value="kittens">
<button onclick="performQuery()">Search</button>
<br><br><br>
<div id="output"></div>

JavaScript

//Search for images with an api key and show the output


var performQuery = function () {
    var apiKey = $("#apikey").val()
    var phrase = $("#phrase").val()

    $.ajax({
        type:'GET',
    url:"https://api.gettyimages.com/v3/search/images/creative?phrase=" + encodeURIComponent(phrase),
        beforeSend: function (request)
        {
            request.setRequestHeader("Api-Key", apiKey);
        }
    }).done(function(data){
            console.log("Success with data")
            $("#output").empty();
            for(var i = 0;i<data.images.length;i++)
            {
               $("#output").append("<img src='" + data.images[i].display_sizes[0].uri + "'/>");
            }  
    }).fail(function(data){
            alert(JSON.stringify(data,2))
        });
}