Navigating through multimedia content - Build Windows 8 Apps with HTML5 and JavaScript - page 152

Building a gallery of pictures
How would you lay out a gallery of pictures? That mostly depends on your creativity and preferences.
In general, a gallery should provide a scrollable list of small images—ideally thumbnails—and give
the user a chance to click one image to see it in a larger format and possibly zoom on it. To build the
gallery of pictures, you focus on the content of the home.html ile.
Introducing the FlipView component
WinJS comes with a readymade component that is perfect to build a gallery of pictures. This compo-
nent is WinJS.UI.FlipView . A flip view displays as a scrollable list—either vertical or horizontal. The list
is arranged in such a way that only one item is displayed at a time. The native user interface of the
component also provides navigation buttons for the user to move to the next or the previous item.
The item can have any representation that makes sense for the application. It doesn't have to be
an image and it doesn't have to be some plain text. In general, along with a flip view, you define the
blueprint of the item to display and define a graphical template for it.
Defining the item to display
As a first step, you define a model for the item you want to display through the flip view. Because you
want the flip view to implement a gallery of images, the item is well represented with the URL of the
physical image and a caption. You create a new JavaScript file and add it to the project in the Js folder.
Let's call this file gallery.js and add the following code to it:
var GalleryApp = GalleryApp || {};
var Photo = WinJS.Class.define(function (img, title) {
var that = {};
that.imageUrl = img;
that.title = title;
return that;
});
GalleryApp.init = function () {
var photos = [
new Photo("images/data/german-sheperd.png", "German sheperd"),
new Photo("images/data/tiger.png", "Just bigger than a cat"),
new Photo("images/data/lion.png", "Just hairier than a cat"),
new Photo("images/data/leopard.png", "Running as a leopard"),
new Photo("images/data/dane.png", "Hungry from Denmark")
];
}
The Photo object will represent the item displayed through the flip view. In this basic example,
you can safely assume that all the images are packaged with the application. In a more realistic