FlickrPics

Getting photos via Flickr service (an example of using the jQuery library). Using Flickr Web service to get pictures of interest.

by Sabin Buraga

HTML

<article>
  <div id="pics">
    <!-- the pictures will be placed inside this element -->
  </div>
</article>

CSS

img {
  width: 200px;
  padding: 0.2em;
  margin: 0.2em;
  float: left;
  border: thin solid #CCC;
}

JavaScript

var MAX_IMG = 7; // the amount of received images

/* Get (asynchronously) public pics available on Flickr by using the jQuery library
   General form of the JSON response transmitted by Flickr is:
{
  "title"       : "Recent Uploads",
  "link"        : "http://www.flickr.com/photos/",
  "description" : "",
  "modified"    : "2017-05-21T13:49:08Z",
  "generator"   : "http://www.flickr.com/",
  "items"       : 
     [ {
	 "title"    : "...",
	 "link"     : "http://www.flickr.com/photos/.../4204222155/",
	 "media"    : 
	    { "m": "https://farm.staticflickr.com/...jpg" },
	 "date_taken"    : "2012-05-20T17:23:43-08:00",
	 "description"    : "...",
	 "published"    : "2012-05-26T13:49:08Z",
	 "author"    : "...",
	 "author_id"    : "...",
	 "tags"    : "iasi romania informatica FII ..."
     } ]
}
*/
$.getJSON("https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", { // input data
    tags: "Iasi, informatica",
    tagmode: "all",
    format: "json" // we want JSON (default format is Atom)
  },
  // an anonymous function to process the data from Flickr
  function(data) {
    // iterating each data provided by the Web service
    $.each(data.items, function(number, photo) {
      // 'exiting' from iterator? 
      if (number >= MAX_IMG) return false;
      // creating an <img> element having as value of "src" attribute
      // the URL included in obtained JSON data;
      // this <img> will be appended to the element with id="pics"
      $("<img/>")
        .attr("src", photo.media.m)
        .attr("title", photo.title)
        .appendTo("#pics");
    });
  });