Load one random flickr image & append to div

前端 未结 5 890
别跟我提以往
别跟我提以往 2021-02-10 02:33

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

5条回答
  •  说谎
    说谎 (楼主)
    2021-02-10 02:46

    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('');
                            }
                            else{
                                console.log(" The request to get the picture was not good :\ ")
                            }
                        }
                    );
    
                }
                else{
                    console.log(" The request to get the array was not good :( ");
                }
            }
        );
    };
    

提交回复
热议问题