jQuery Flipster

CSS3 3D transform-based jQuery plugin built to replicate the familiar 'cover flow' effect, but also supports a variety of styles.

How To

Step 1: Include LambdaEx Framework in Logi Info Application. Include LambdaEx Framework in Logi Info Application.

Step 2: Include Flipster source files in Logi Info Application Include Flipster source files in Logi Info Application

Coverflow

<Division HtmlDiv="True" ID="coverflow">
  <Division Class="flip-items" HtmlDiv="True">
    <DataList Class="flip-items" ID="listCoverflow" Ordered="False">
      <DataLayer ID="dlCoverflow" Type="Static">
        <StaticDataRow Image="flipster.img.text1.gif" Title="Chart 1" />
        <StaticDataRow Image="flipster.img.text2.gif" Title="Chart 2" />
        <StaticDataRow Image="flipster.img.text3.gif" Title="Chart 3" />
        <StaticDataRow Image="flipster.img.text4.gif" Title="Chart 4" />
        <StaticDataRow Image="flipster.img.text5.gif" Title="Chart 5" />
      </DataLayer>
      <ListItem>
        <Image Caption="[at]Data.Image[tilde]" />
      </ListItem>
    </DataList>
  </Division>
  <IncludeScript IncludedScript="$('#coverflow').flipster();" />
</Division>

More coverflow options

<Division HtmlDiv="True" ID="coverflowExtended">
  <Division Class="flip-items" HtmlDiv="True">
    <DataList Class="flip-items" ID="listCoverflowExtended" Ordered="False">
      <DataLayer ID="dlCoverflowExtended" Type="Static">
        <StaticDataRow Image="flipster.img.text1.gif" Title="Chart 1" />
        <StaticDataRow Image="flipster.img.text2.gif" Title="Chart 2" />
        <StaticDataRow Image="flipster.img.text3.gif" Title="Chart 3" />
        <StaticDataRow Image="flipster.img.text4.gif" Title="Chart 4" />
        <StaticDataRow Image="flipster.img.text5.gif" Title="Chart 5" />
      </DataLayer>
      <ListItem>
        <Image Caption="[at]Data.Image[tilde]" />
      </ListItem>
    </DataList>
  </Division>
  <IncludeScript IncludedScript="$('#coverflowExtended').flipster({style:'carousel', spacing: -0.5, nav:true, buttons:true});" />
</Division>

Flipster Wheel

<Division HtmlDiv="True" ID="Wheel">
  <Division Class="flip-items" HtmlDiv="True">
    <DataList Class="flip-items" ID="listWheel" Ordered="False">
      <DataLayer ID="dlWheel" Type="Static">
        <StaticDataRow Image="flipster.img.text1.gif" Title="Chart 1" />
        <StaticDataRow Image="flipster.img.text2.gif" Title="Chart 2" />
        <StaticDataRow Image="flipster.img.text3.gif" Title="Chart 3" />
        <StaticDataRow Image="flipster.img.text4.gif" Title="Chart 4" />
        <StaticDataRow Image="flipster.img.text5.gif" Title="Chart 5" />
      </DataLayer>
      <ListItem>
        <Image Caption="[at]Data.Image[tilde]" />
      </ListItem>
    </DataList>
  </Division>
  <IncludeScript IncludedScript="$('#Wheel').flipster({style:'wheel', spacing: 0});" />
</Division>

Flipster Flat

<Division HtmlDiv="True" ID="Flat">
  <Division Class="flip-items" HtmlDiv="True">
    <DataList Class="flip-items" ID="listFlat" Ordered="False">
      <DataLayer ID="dlFlat" Type="Static">
        <StaticDataRow Image="flipster.img.text1.gif" Title="Chart 1" />
        <StaticDataRow Image="flipster.img.text2.gif" Title="Chart 2" />
        <StaticDataRow Image="flipster.img.text3.gif" Title="Chart 3" />
        <StaticDataRow Image="flipster.img.text4.gif" Title="Chart 4" />
        <StaticDataRow Image="flipster.img.text5.gif" Title="Chart 5" />
      </DataLayer>
      <ListItem>
        <Image Caption="[at]Data.Image[tilde]" />
      </ListItem>
    </DataList>
  </Division>
  <IncludeScript IncludedScript="$('#Flat').flipster({style:'flat', spacing:-.25});" />
</Division>