Загрузите одно случайное изображение flickr и добавьте в div

Question

Я в основном пытаюсь загрузить одно случайное изображение flickr, полученное от конкретного пользователя и определенного набора, которое затем отображается внутри div с идентификатором 'flickr-wrap'.Я пытаюсь манипулировать этим кодом JSON, чтобы делать то, что я хочу, но не знаю, с чего начать.Этот код в настоящее время загружается во множество изображений (я просто хочу загрузить одно) и использует теги (но я хочу пользователя и наборы вместо него), кто-нибудь может мне помочь?

 $.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");
  });

РЕДАКТИРОВАТЬ

Я прекратил цикл, что замечательно, и теперь обновил приведенный выше код для добавления фотографии set.gne вместо public.gne, и немного изменил способ вызова в фотосете с помощьюудалив несколько строк кода. Теперь все, что мне нужно сделать, это получить случайное изображение из этого набора. Вот что я получил до сих пор:

$.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");
  });

РЕДАКТИРОВАТЬ

У меня еще нет случайных вещей, чтобы работать.Больше всего раздражает.Мог бы действительно использовать некоторую помощь здесь.Отчаянный!

Answer 1

data.items - это массив ваших изображений, поэтому просто получите первое и не перебирайте массив.

Вместо

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

do

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

Answer 2

Вот обновленный пример скрипки +, который позволяет вам выбрать случайное изображение по тегу (мне это нужно и я подумал, что это может быть полезно)

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

Полный пример:

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

Назовите код так:

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

Answer 3

Я заметил несколько опечаток в ответе выше.Вот этот код с исправленными опечатками и парой незначительных изменений.

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

Answer 4

В конце концов мне пришлось использовать совершенно другой подход. Оказывается, API значка Flickr изменился и добавил больше гибкости, пока я пытался найти ответ на этот вопрос. Это в основном делает то, что мне нужно сейчас: http://www.flickr.com/badge.gne

Answer 5

Возможно, вы захотите получить большие изображения, для этого вам понадобится ключ API от здесь . Затем вы можете вызвать эту функцию, и вот она:

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