CHAPTER 22 - Create Latest Pictures App by Linking to Flickr

We looked at how to create a "Wanted Pirates Poster (海賊懸賞單)" app using Picasa in the previous chapter. In this chapter, we will look at another web album service- Flickr, which is just as popular as Picasa. Linking to Flickr is not as straight forward as Picasa. Although Flickr does provide its API, you need to apply for a key to use it. Since the focus of this chapter is to show you how to easily link to your photo album, we will again use RSS+imggallery.

Completed example: http://jqmdesigner.appspot.com/designer.html#&ref=5739257494765568

To link to Flickr, we must first take a look at its official website. Because we are not using its API here, what we see is its feeds: https://www.flickr.com/services/feeds/

If you don't fully understand the contents of this page, that's okay. The most important thing is this URL: https://api.flickr.com/services/feeds/photos_public.gne. You can use this URL to obtain corresponding RSS for all pictures and albums shared with the public. Nevertheless, you need to pay attention to many details.

The most important one is "User ID." Let us look up the personal information of any one photographer, for example, http://www.flickr.com/photos/sunsward7/. From the photographer's albums, you can discover that neither "ssumsward7" in the URL nor "Sunsword & Moonsabre" is the real Flickr ID. The real ID can probably be found in the code by searching with "N0." The photographer's real ID is "44912907@N05." You can see that this is in the URL of the RSS as well. (Amazingly, you cannot find it on the pages, but you can find it in the code.) https://www.flickr.com/services/feeds/photos_public.gne?id=44912907@N05&format=rss_200 is the URL of the RSS. You can see the user ID in it. (If you don't want to try to look up the userid this way, you can use the following website to search for Flickr users' IDs, http://idgettr.com/.)

To verify if the above is true, let us try it out by linking EZoApp with Flickr. Same as linking with Picasa, we will combine part of the RSS component's code with the imggallery. We can easily link the RSS in almost exactly the same way.

$(document).on("gkComponentsReady", function (w) {
  var $ele = $("#flickr"),
    a, content,title,
    img = [],
    rss = 'https://www.flickr.com/services/feeds/photos_public.gne?id=44912907@N05&format=rss_200',
    url = 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=500&callback=?&q=' + encodeURIComponent(rss);
  $.ajax({
    type: "GET",
    url: url,
    dataType: "json",
    error: function (e) {
      console.log('oh no');
    },
    success: function (e) {
      a = $(e);
      num = a[0].responseData.feed.entries.length;
      content = a[0].responseData.feed.entries[0].mediaGroups[0].contents[0].url;
      title = a[0].responseData.feed.entries[0].mediaGroups[0].contents[0].title;
      console.log(a);
      console.log(num);
      console.log(content);
      console.log(title);
    }
  });
});

When the above is done, we will let imggallery consume the data. First, modify the HTML a little, mainly to adjust the style and give it an id "flickr".

<div id="flickr" is="imggallery" style="background-color:#fafafa;width:100%;margin:0 auto;">
  <div style="width:90px; height:90px; overflow:hidden; border:3px solid #ccc; display:inline-block;margin:1px;">
    <a href="#imgpage" data-transition="slide">
      <img data-src="{{data-src}}" style="width:100%; min-height:100%;">
    </a>
</div>

Then, add a function in JS to feed the URLs of the pictures to the imggallery.

function imggallery(num) {
  for (var i = 0; i < num; i++) {
    img.push({
      "data-src": a[0].responseData.feed.entries[i].mediaGroups[0].contents[0].url,
      "title": a[0].responseData.feed.entries[i].mediaGroups[0].contents[0].title
    });
  }
  if (img.length >= num) {
    console.log(img);
    $ele.gk("model", img);
  }
}

Preview it and you can see that all the pictures are displayed in square boxes, and arranged in rows. If you do not see any pictures, it might be because the pictures are being updated. Do not worry. Our example uses the latest photos. (Click Preview to preview: http://jqmdesigner.appspot.com/designer.html#&ref=5766302165630976)

Next, we will add the function to display the picture in full-size view when clicked. Basically, it is exactly the same as with Picasa. First, we will create a new page called imgpage. Then, create two global variables; pass the URL and the name of the clicked picture to the global variables; and read the variables when executing pageshow event in the imgpage. That's it!

HTML：

<div id="imgpage" data-role="page" is="page">
  <div data-role="header" data-position="fixed" data-theme="b">
    <h3>圖片資訊</h3>
    <a class="ui-btn ui-btn-left ui-icon-back ui-btn-icon-notext ui-corner-all" data-rel="back">Button</a>
  </div>
  <div role="main" class="ui-content" is="content">
    <h4 style="font-size:12px; margin:5px 10px;">123</h4>
  </div>
</div>

javascript：

var imgsrc, imgtitle;
$(document).on("gkComponentsReady", function (w) {
  var $ele = $("#flickr"),
    a, content, title,
    img = [],
    rss = 'https://www.flickr.com/services/feeds/photos_public.gne?id=44912907@N05&format=rss_200',
    url = 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=500&callback=?&q=' + encodeURIComponent(rss);
  $.ajax({
    type: "GET",
    url: url,
    dataType: "json",
    error: function (e) {
      console.log('oh no');
    },
    success: function (e) {
      a = $(e);
      num = a[0].responseData.feed.entries.length;
      content = a[0].responseData.feed.entries[0].mediaGroups[0].contents[0].url;
      title = a[0].responseData.feed.entries[0].mediaGroups[0].contents[0].title;
      console.log(a);
      console.log(num);
      console.log(content);
      console.log(title);
      imggallery(num);
    }
  });

  function imggallery(num) {
    for (var i = 0; i < num; i++) {
      img.push({
        "data-src": a[0].responseData.feed.entries[i].mediaGroups[0].contents[0].url,
        "title": a[0].responseData.feed.entries[i].mediaGroups[0].contents[0].title
      });
    }
    if (img.length >= num) {
      console.log(img);
      $ele.gk("model", img);
    }
    $ele.find('a').on('click', function () {
      var aIndex = $(this).parent('div').index();
      imgsrc = $(this).find('img').attr('src');
      imgtitle = img[aIndex].title;
      console.log(imgtitle);
      console.log(imgsrc);
    });
  }
});
(function () {
  $(document).on('pageshow', '#imgpage', function () {
    $('#imgpage .ui-content').append('<img src="' + imgsrc + '" style="width:100%;"/>');
    $('#imgpage h4').text(imgtitle);
  });
})();
(function () {
  $(document).on('pageshow', '#home', function () {
    $('#imgpage .ui-content').find('img').remove();
    $('#imgpage h4').text('');
  });
})();

Unfortunately, Flickr only provides RSS for the 20 newest pictures. You have to use its API if you want to really link to your albums, upload photos, and leave messages. We will not give a detailed introduction to Flickr. If you really have to use RSS to create an album app, you can use Picasa. If you just want to track a particular photographer's picture updates, you can use Flickr. They are both done in almost exactly the same way! (Completed example: http://jqmdesigner.appspot.com/designer.html#&ref=5705807014395904)

Continue reading CHAPTER 23 - Create Chat with Strangers App by Linking to Firebase
Or Return to Table of Contents