Gallery

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.

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

<div id='photos'>
  <div class='photo' style='background-image:url(http://placekitten.com/100/80)'></div>
</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.

<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.

 .photo {
   background-position: 50% 50%;
   width: 100px;
   height: 80px;
   overflow: hidden;
   float: left;
   margin: 5px;
   border: 3px solid white;
   box-shadow: 0 2px 3px rgba(0, 0, 0, .3);
}

For the logic, we have the following FacebookPhotos module:

 // Facebook Page Photo Module
 app.FacebookPhotos = (function(){
   function FacebookPhotos(){
     // constructor
   }
   FacebookPhotos.prototype.fetch = function(element){
     // logic here
   };
   return FacebookPhotos;
}).call(this); // End Facebook

What we are going to fetch from Facebook?

The Facebook Open Graph

http://graph.facebook.com/<object_id>
http://graph.facebook.com/<object_id>/<associations>

/me
/makzan
/<page_name>
/<page_name>/albums
/<album_id>
/<album_id>/photos

How to get album ID? There are two ways:

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

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)

https://www.facebook.com/media/set/?set=a.663338843678077.1073741827.144090562269577&type=3

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

So the album API becomes:

http://graph.facebook.com/663338843678077/

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

And the photos in that album lists here:

http://graph.facebook.com/663338843678077/photos

And the final version:

 // Facebook Page Photo Module
 app.FacebookPhotos = (function(){
   function FacebookPhotos(){
     this.photos = [];
   }
   FacebookPhotos.prototype.fetch = function(element){
     var url = 'http://graph.facebook.com/663338843678077/photos' + '?callback=?';
     $.getJSON(url, function(data) {
       console.log('from fb: ', data);
      $(element).empty();
      for(var i=0, len=data.data.length; i<len; i++)
      {
        var image = data.data[i];
        $(element).append("<div class='photo' style='background-image:url( " + image.picture + ")'></div>");
      }
    });
  };
  return FacebookPhotos;
}).call(this); // End Facebook

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

var fbPhotos = new app.FacebookPhotos();

And fetch the photos when the gallery page is shown.

if ( $(event.target).attr('id') === 'gallery' ) {
  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”.