Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript AJAX Basics (retiring) AJAX and APIs Displaying the Photos

Anton Bozhinov
Anton Bozhinov
12,381 Points
Posted by Anton Bozhinov
Anton Bozhinov
12,381 Points

Need help for Flickr API

I want to get a random photo with the flickr api with a tag of "landscape". The random photo link seems to be added programaticly in the html on inspect element in ChromeDevTools. But there is no photo. What am I doing wrong?

$(document).ready(function() {


  $.getJSON("https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
           {
              tags: "landscape",
              format: "json"
            },

            //The callback function
            function(data) {

              //Get random photo from the api's items array
                var randomPhoto = data.items[Math.floor(Math.random() * data.items.length)];  


                $(".portret").css({


                  position: "relative",
                  height: "100vh",
                //Use the randomPhoto's link
                  backgroundImage: "url("+randomPhoto.link+")",
                  backgroundPosition: "center",
                  backgroundRepeat: "no-repeat",
                  backgroundSize: "cover"
                });
            }

           );




});

2 Answers

danditomaso
danditomaso
3,192 Points
danditomaso
danditomaso
3,192 Points

Hi Anton, I'm not the best Javascript expert on the forum's, but after reviewing your code, I noticed on of your CSS selectors was misspelled, maybe that could be the cause of your issue? The line $(".portret").css({ should maybe be renamed to $(".portrait.css({

I'm hoping the issue is as simple as typo in your code, try out the change above and let me know if this resolves it for you.

Anton Bozhinov
Anton Bozhinov
12,381 Points
Anton Bozhinov
Anton Bozhinov
12,381 Points

Hi Dan,

Actually I did figure it out. It was mistake with the link method from the API.

Instead of 

backgroundImage: "url("+randomPhoto.link+")",

It has to be 

backgroundImage: "url("+randomPhoto.media.m+")",

Because .link is not a reference to the file itself. But there came up another problem - How to get a lagrer size image !!! :D