Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

Photos display vertically not horizontally. What is missing?

My Flickr photos show, but instead of displaying horizontally like in the video, mine are displaying vertically.

flickr.js

$(document).ready(function() {

 var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";


 $('form').submit(function (evt) {
    var $submitButton = $('#submit');
    var $searchField = $('#search');
    evt.preventDefault();
    $searchField.prop("disabled",true);
    $submitButton.attr("disabled", true).val("searching....");
    var animal = $searchField.val();
    $('#photos').html('');
    $.getJSON(flickerAPI, {
        tags: animal,
        format: "json"
      },
    function(data){
      var photoHTML = '';
      if (data.items.length > 0) {
        $.each(data.items,function(i,photo) {
          photoHTML += '<li class="grid-25 tablet-grid-50">';
          photoHTML += '<a href="' + photo.link + '" class="image">';
          photoHTML += '<img src="' + photo.media.m + '"></a></li>';
        }); // end each
      } else {
        photoHTML = "<p>No photos found that match: " + animal + ".</p>"
      }
      $('#photos').html(photoHTML);
      $searchField.prop("disabled", false);
      $submitButton.attr("disabled", false).val("Search");
    }); // end getJSON

  }); // end click

}); // end ready

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>AJAX Flickr Photo Feeder</title>
  <link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/main.css">


</head>
<body>
  <div class="grid-container centered">
    <div class="grid-100">
      <div class="contained">
        <div class="grid-100">
          <div class="heading">
            <h1>Flickr Photo Feeder</h1>
            <p>Choose which kind of animal you'd like to return photos of...</p>
          </div>
          <ul class="filter-select">
            <li><button>Dog</button></li>
            <li><button>Cat</button></li>
            <li><button>Moose</button></li>
          </ul>
        </div>

        <div id="photos">

        </div>
      </div>
    </div>
  </div>
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="js/flickr.js"></script>
</body>
</html>
Orlando Watson
Orlando Watson
12,186 Points

That sounds like a CSS problem. Check if you added the relevant classes to each list item when building them.

1 Answer

Before you loop through the results and create the li elements for each of them, you need to have a ul (unordered list) element to put them in.

In the video you'll notice he assigns the photoHTML variable the opening ul tag initially, and the last thing concatenated to it is the closing tag.

e.g.

var photoHTML = '<ul>';
...
photoHTML += '</ul>';

Note that you shouldn't have a p tag as a direct child of a ul tag, so the 'No photos found' text should be put in an li element also or instead of the p tag.