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 trying to manipulate this JSON code to do what I want but haven't a clue where to start. This code currently loads in lots of images (I just want one to load in) and uses tags (but I want user and sets instead), could anyone help me out?

 $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",{
    id: "51997044@N03",
    tagmode: "any", 
    format: "json" },
  function(data) {
    $("<img/>").attr({src: data.items[0].media.m.replace('_m.','.')}).appendTo("#flickr-wrap");
  });

EDIT

I've stopped the loop which is great and have now updated the above code to pull in the photo set.gne instead of the public.gne, and have slightly changed how I call in the photoset by removing some lines of code. Now all I need to do is pull in a random image from that set. Here's what ive got so far:

$.getJSON("http://api.flickr.com/services/feeds/photoset.gne?set=72157626230243906&nsid=51997044@N03&lang=en-us&format=json&jsoncallback=?",
  function(data) {
    $("<img/>").attr({src: data.items[0].media.m.replace('_m.','.')}).appendTo("#flickr-wrap");
  });

EDIT

Still haven't got the random thing to work yet. Most annoying. Could really use some help here. Desperate!

Ulda

Answer 1

In the end I had to take a completely different approach. Turns out the Flickr badge API changed and added more flexibility whilst I was trying to figure out the answer to this question. It basically does what I need to now: http://www.flickr.com/badge.gne

Ulda

Answer 2

data.items is the array of your images, so just get the first one and don't iterate over the array.

Instead of

$.each(data.items, function(i,item){...}

do

$("<img/>").attr({src: data.items[0].media.m.replace('_m.','.')}).appendTo("#flickr-wrap");

Murphree

Thats great, thanks! Do you also know how I could define a flickr user and photo set to pull the images from? – Ulda

Ah okay, just for info, is that a Flickr API thing then or is it a JSON thing? – Ulda

Both I guess. You need to know how exactly to get the data you need (API thing), and then what do with it (JSON thing). – Murphree

Answer 3

I noticed several typos in the above answer. Here is a that code with the typos corrected and a couple minor changes.

    function getPicture(the_user_id, your_div_id){
        var apiKey = "YOUR-API-KEY"; // replace this with your API key

        // get an array of random photos
        $.getJSON(
            "http://api.flickr.com/services/rest/",
            {
                method: 'flickr.interestingness.getList',
                api_key: apiKey,
                format: 'json',
                nojsoncallback: 1,
                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(
                        "http://api.flickr.com/services/rest/",
                        {
                            method: 'flickr.photos.getSizes',
                            api_key: apiKey,
                            photo_id: photo.id,
                            format: 'json',
                            nojsoncallback: 1
                        },
                        function(response){
                            if(response.stat == 'ok'){
                                var the_url = response.sizes.size[5].source;
                                $("#"+your_div_id).append("");
                            }
                            else{
                                console.log(" The request to get the picture was not good :\ ")
                            }
                        }
                    );

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

Tedtedd

Hey Mike, thanks for this, it still not working although I'm not to sure i'm putting my user id and div id in the correct place. Would you mind taking a look at this fiddle to see where i'm going wrong? jsfiddle.net/Gp3n7/4 – Ulda

Sorry for the delay. In your fiddler you replaced the function parameters with you values. You cannot do that. Add the following at the bottom of the script.getPicture('userid','divid');. Also for some reason the append is showing empty above. My post actually contains '<img src="' + the_url + '" />' – Tedtedd

Hey Mike, no worries for the delay. I've made the slight changes but it still won't work. How does the script no what div to append the image to if I don't declare it? Same question with regard to the user ID? Here is my updated fiddle: jsfiddle.net/Gp3n7/11 – Ulda

Answer 4

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('<your_tag>', function(url) {
    $("#random").attr("src", url)
});

Boyish

Answer 5

You may want to pull bigger images, for that you need your API key from here . Then, you may call this function and thats it:

function getPicture(the_user_id, your_div_id){
    var apiKey = "YOUR-API-KEY"; // replace this with your API key

    // get an array of random photos
    $.getJSON(
        "http://api.flickr.com/services/rest/",
        {
            method: 'flickr.people.getPublicPhotos',
            api_key: apiKey,
            user_id: the_user_id,
            format: 'json',
            nojsoncallback: 1,
            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 photoId = 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(
                    "http://api.flickr.com/services/rest/",
                    {
                        method: 'flickr.photos.getSizes',
                        api_key: apiKey,
                        photo_id: photoId,
                        format: 'json',
                        nojsoncallback: 1
                    },
                    function(response){
                        if(response.stat == 'ok'){
                            var the_url = response.sizes.size[5].source;
                            $("#"+your_div_id).append('<img src="' + 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 :( ");
            }
        }
    );
};

Avalon

Great thanks for this! The only problem is that I can't seem to get it working. I've inserted my API key but nothing seems to be loading. Where can/should I define my photoset and user ID? – Ulda

For reference have put this code in a JSFiddle, with my API key etc: jsfiddle.net/Gp3n7/2 – Ulda

Hey.. check the part where it says $('#random') ... you left the +your_div_id part... you can either change that back to $('#'+your_div_id ... and call the function like this getPicture('flickruserid','random); .. in where it says flickruserid just put the user id of the user you want to get the pictures from. .... or remove the +your_div_id and then call the function with just the first parameter – Avalon

Well I've done the first suggestion but it still doesn't work, could you take another look at it for me please and see where I'm going wrong? jsfiddle.net/Gp3n7/3 I'm not a great JS coder so all the help I can get is hugely appreciated! – Ulda