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

What's semantic zoom, anyway?
In spite of the name, semantic zoom has very little to do with zooming—at least according to the
common meaning of the term used so far. What the component does is switch between two different
views of the same content. One view is the master view; the other is the detail view. The detail view is
considered the zoomed-in view, namely the most detailed view of the content available. Conversely,
the master view is referred to as the zoomed-out view, namely the one where elements are grouped
in classes for the ease of selection.
preparing the ground for semantic zoom
You prepare a page for semantic zoom by adding three DIV elements. The following is the code you
need to enter in the BODY element of the default.html page.
<div id="semantic-zoom-container"
data-win-control="WinJS.UI.SemanticZoom">
<!-- The zoomed-in view. -->
<div id="listview-in"
data-win-control="WinJS.UI.ListView"></div>
<!--- The zoomed-out view. -->
<div id="listview-out"
data-win-control="WinJS.UI.ListView"></div>
</div>
The parent DIV is mapped to an instance of the WinJS.UI.SemanticZoom component. The two
child DIVs are mapped to instances of the WinJS.UI.ListView components. The great news is that
your only concern is giving list views a template and content; switching between views and the user
interface for doing that is gently offered by the SemanticZoom component.
Defining ad hoc data for semantic zoom
As usual, you add a new JavaScript file to the project to contain most of the logic for the application.
In this case, you can name the file videos.js . Next, you open the file and add the following code:
var VideosApp = VideosApp || {};
var Clip = WinJS.Class.define(function (category, title, id) {
var that = {};
that.title = title;
that.category = category;
that.videoId = id;
that.videoUrl = "http://www.youtube.com/embed/" + id + "?html5=1";
that.posterUrl = "http://img.youtube.com/vi/" + id + "/1.jpg";
return that;
});