Load one random flickr image & append to div

Question

I\'m basically trying to load in one random flickr image taken from a specific user and specific set which then gets displayed within a div with the id of \'flickr-wrap\'. I\'m

Answer 1

Here is an updated fiddle + example that allows you to fetch a random image by tag (I needed this and thought it might be helpful)

http://jsfiddle.net/6gY83/4/

Full example:

function getPicture(tags, cb) {
    var apiKey = "fa214b1215cd1a537018cfbdfa7fb9a6"; // replace this with your API key

    // get an array of random photos
    $.getJSON(
        "https://api.flickr.com/services/rest/?jsoncallback=?", {
            method: 'flickr.photos.search',
            tags: tags,
            api_key: apiKey,
            format: 'json',
            per_page: 10 // you can increase this to get a bigger array
        },
        function(data) {

            // if everything went good
            if (data.stat == 'ok') {
                // get a random id from the array
                var photo = data.photos.photo[Math.floor(Math.random() * data.photos.photo.length)];

                // now call the flickr API and get the picture with a nice size
                $.getJSON(
                    "https://api.flickr.com/services/rest/?jsoncallback=?", {
                        method: 'flickr.photos.getSizes',
                        api_key: apiKey,
                        photo_id: photo.id,
                        format: 'json'
                    },
                    function(response) {
                        if (response.stat == 'ok') {
                            var the_url = response.sizes.size[5].source;
                            cb(the_url);
                        } else {
                            console.log(" The request to get the picture was not good :\ ")
                        }
                    }
                );

            } else {
                console.log(" The request to get the array was not good :( ");
            }
        }
    );
};

Call the code like this:

getPicture('', function(url) {
    $("#random").attr("src", url)
});