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!

score 3 · Answer 1 · answered Mar 16 '12 at 15:25

3

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");

answered Mar 16 '12 at 15:25

egze

3,200
23
23

Thats great, thanks! Do you also know how I could define a flickr user and photo set to pull the images from? – egr103 Mar 16 '12 at 15:38
Ah okay, just for info, is that a Flickr API thing then or is it a JSON thing? – egr103 Mar 16 '12 at 15:50
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). – egze Mar 16 '12 at 15:58

Peter Willemsen · Answer 2 · 2014-08-04T20:49:10.750

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)
});

Mike · Answer 3 · 2012-04-12T16:29:24.610

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 :( ");
                }
            }
        );
    };

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? http://jsfiddle.net/Gp3n7/4/ — egr103, Mar 21 '12 at 16:59
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 `''` — Mike, Apr 12 '12 at 16:27
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: http://jsfiddle.net/Gp3n7/11/ — egr103, Apr 13 '12 at 08:31

score 0 · Accepted Answer · answered Jul 11 '12 at 08:51

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

score 0 · Answer 5 · edited Feb 11 '14 at 15:40

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 :( ");
            }
        }
    );
};

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? — egr103, Mar 19 '12 at 10:31
For reference have put this code in a JSFiddle, with my API key etc: http://jsfiddle.net/Gp3n7/2/ — egr103, Mar 19 '12 at 10:54
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 — lu1s, Mar 19 '12 at 22:37
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? http://jsfiddle.net/Gp3n7/3/ I'm not a great JS coder so all the help I can get is hugely appreciated! — egr103, Mar 20 '12 at 09:38

Load one random flickr image & append to div

5 Answers5

Linked