Adding Back Cover Content

When clicked, a C1CoverFlow cover will flip over and reveal its back cover, providing additional content regarding the album such as its track list. In this topic, you'll create a track list for a C1CoverFlow cover. This topic assumes that you have created an AJAX-enabled ASP.NET project that contains a ScriptManager control (see Creating an AJAX-Enabled ASP.NET Project) and a C1CoverFlow control.

Complete the following steps:

1.   Click the Source tab to switch to Source view.

2.   Create a C1Cover object by adding the following markup between the <cc1:C1CoverFlow> and </cc1:C1CoverFlow> tags, replacing [YourImagePath] with the path to your custom image:

<Covers>

    <cc1:C1Cover ImageUrl="[YourImagePath]">

    </cc1:C1Cover>

</C1Cover>

3.   Add a header for the track list by adding BackCoverText="Led Zeppelin Tracks" to the <cc1:C1Cover> tag so that the markup resembles the following:

 

<cc1:C1Cover ImageUrl="[YourImagePath]" BackText="Led Zeppelin Tracks">

4.   Place your cursor between the <cc1:C1Cover> and </cc1:C1Cover> tags and enter the following:

<BackCoverContent>

<div style="width: 100%; height: 100%; background-color: Blue;">

Stairway to Heaven

<br />

Kashmir

<br />

Ramble On

</BackCoverContent>

5.   Open the project in Mobile Safari and click the album cover.

A track list with your custom content appears.


Send us comments about this topic.
Copyright © GrapeCity, inc. All rights reserved.