We use the List-Reveal pattern a lot in daily app development, especially for those informative app. Here we will use the same pattern again for display photos. And learn how to show photos from a Facebook gallery as well.

Bakery gallery

First, we add the following photos contaioner to the #gallery page.

1<div id='photos'>
2  <div class='photo' style='background-image:url('></div>

For each photo, we use background to display the image. The reason of using background-image instead of img tag is because the former provides more controls on how to display an image.

1<div class='photo' style='background-image:url( " + image.picture + ")'></div>

When using the background-image approach, we need define the CSS to give width/height to the element. {
 2  background-position: 50% 50%;
 3  width: 100px;
 4  height: 80px;
 5  overflow: hidden;
 6  float: left;
 7  margin: 5px;
 8  border: 3px solid white;
 9  box-shadow: 0 2px 3px rgba(0, 0, 0, .3);

For the logic, we have the following FacebookPhotos module:

 1// Facebook Page Photo Module
 2app.FacebookPhotos = (function(){
 3  function FacebookPhotos(){
 4    // constructor
 5  }
 6  FacebookPhotos.prototype.fetch = function(element){
 7    // logic here
 8  };
 9  return FacebookPhotos;
10}).call(this); // End Facebook

What we are going to fetch from Facebook?

The Facebook Open Graph<object_id><object_id>/<associations>


How to get album ID? There are two ways:

  1. Digg from API value (/<page_name>/albums)
  2. Find from the URL

Fb data visual json

From the API that lists all albums from a page, we can find the album ID and name.

Or with the URL approach, for example, in the following URL (you get it by browsing the album in normal Facebook page)

In the set parameter, the first section is the album ID and the last one is the page ID.

So the album API becomes:

Try to inspect the API result in your favorite JSON reader.

And the photos in that album lists here:

And the final version:

 1// Facebook Page Photo Module
 2app.FacebookPhotos = (function(){
 3  function FacebookPhotos(){
 4 = [];
 5  }
 6  FacebookPhotos.prototype.fetch = function(element){
 7    var url = '' + '?callback=?';
 8    $.getJSON(url, function(data) {
 9      console.log('from fb: ', data);
10      $(element).empty();
11      for(var i=0,; i<len; i++)
12      {
13        var image =[i];
14        $(element).append("<div class='photo' style='background-image:url( " + image.picture + ")'></div>");
15      }
16    });
17  };
18  return FacebookPhotos;
19}).call(this); // End Facebook

As same as the news, we init the FacebookPhotos instance.

1var fbPhotos = new app.FacebookPhotos();

And fetch the photos when the gallery page is shown.

1if ( $('id') === 'gallery' ) {
2  fbPhotos.fetch($('#photos'));

Challenge: How about using SwipeJS to display the photos?

What’s next? We’re going to take a look at “View photo”.

overlaied image when clicked on thumbnail

Makzan | Mobile web app dev with phonegap | Table of Content