View photo

Now comes the reveal part. It is almost the same as the News module, just now news entry becomes photo.

The #photo-view page.

 1<div data-role='page' id='photo-view'>
 2  <div data-role='header'>
 3    <h2>Gallery</h2>
 4    <a data-icon='arrow-l' data-rel='back'>Great Bakery</a>
 5  </div>
 6  <div data-role='content'>
 7    <div id='photo'></div>
 8  </div>
 9</div>

The CSS for some photos styles.

1#photo {
2  text-align: center;
3}
4.big-photo {
5  max-width: 90%;
6  border: 10px solid white;
7  box-shadow: 0 3px 3px rgba(0, 0, 0, .3);
8}

And add the data-photo-id to each photo link in the photos list.

1$(element).append("<a href='#photo-view' data-photo-id='" + i + "'><div class='photo' style='background-image:url( " + image.picture + ")'></div></a>");

When displaying the photo, we get the photo ID and use it to find the photo object. Then finally display the image in an img tag.

 1// Photo view
 2$('#photos').delegate('a[href="#photo-view"]', 'click', function(event){
 3  var photoId = $(this).data('photoId');
 4
 5  var contentElement = $('#photo');
 6  var photoData = fbPhotos.photos.data[photoId];
 7  if (photoData === undefined)
 8  {
 9    contentElement.html('Error loading photo.');
10  }
11  else {
12      var text = "<img src='" + photoData.images[2].source + "' alt='photo' class='big-photo'>";
13
14      contentElement.html(text);
15  }
16}); // End Photo view

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

◀ Gallery Setup mongolab ▶

makzan.

View photo

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