oneupTemplate

Creates a page that allows users to navigate between full-screen images.

Overview

Use the oneupTemplate element to display a single, full-screen image. Users can navigate left or right on the remote to select another image. Activating an up action on the remote will shrink the image and allow a description to be displayed. The following figure shows the basic layout for a oneupTemplate page. The default theme for a oneup template is dark.

[Image]

Main Elements

The following listing shows the main elements of the oneupTemplate element in TVML format.

<oneupTemplate>
    <section>
        <lockup>
            <img />
            <title>…</title>
            <row>
                …
            </row>
        </lockup>
        <lockup>
            …
        </lockup>
    </section>
</oneupTemplate>

Element Descriptions

img: The image to be displayed on screen.
lockup: A single image and related text.
row: Subtitle information relating to the selected image.
section: Multiple lockup elements, each of which contains an item to be displayed.
title: The title to be displayed when a user selects an image.

Example

The following listing shows the TVML for a oneupTemplate example. The example shows a full screen image, with information about the image displayed along the bottom of the screen when the user zooms into the image.

<document>
    <oneupTemplate mode="oneup caption" handlesOverflow="true">
        <section>
            <lockup>
                <img src="path to images on your server/Car_Movie_1920x1080.png" />
                <title>WWDC Roadtrip</title>
                <row>
                    <subtitle>San Francisco</subtitle>
                    <subtitle>June 8, 2015</subtitle>
                </row>
            </lockup>
            <lockup>
                <img src="path to images on your server/Beach_Movie_1920x1080.png" />
                <title>Beach time</title>
                <row>
                    <subtitle>Santa Cruz</subtitle>
                    <subtitle>May 1, 2015</subtitle>
                </row>
            </lockup>
            <lockup>
                <img src="path to images on your server/Space_Movie_1920x1080.png" />
                <title>Spaced out</title>
                <row>
                    <subtitle>Space station</subtitle>
                    <subtitle>July 15, 2015</subtitle>
                </row>
            </lockup>
        </section>
    </oneupTemplate>
</document>

The following figure shows the output for the above example:

[Image]

Topics

Valid TVML Styles

tv-transition