SOURCE CODE: Deck Swapper
VIEW EXAMPLE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Deck Swapper | JavaScript Examples | UIZE JavaScript Framework</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="keywords" content="animation widget Uize.Widget.Swap.Deck"/>
  <meta name="description" content="See a demo of the deck swapper widget, which provides a JavaScript animation transition effect when swapping from one item in the deck to another."/>
  <link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href="http://www.uize.com/latest-news.rss"/>
  <link rel="stylesheet" href="../css/page.css"/>
  <link rel="stylesheet" href="../css/page.example.css"/>
  <style tyle="text/css">
    .deckItem {
      display:block;
      position:absolute;
      visibility:hidden;
      width:100%;
      height:100%;
    }
    .deckItem .deckItemTitle {
      position:absolute;
      left:8px;
      top:8px;
      width:474px;
      background:#444;
      opacity:.3;
      filter:alpha(opacity=30);
      font-size:30px;
      letter-spacing:2px;
      text-align:center;
      padding:2px 0 0 10px;
      border-top:1px solid #ccc;
      border-bottom:1px solid #000;
    }
    .deckItem .deckItemDescription {
      position:absolute;
      font-size:14px;
      font-weight:bold;
      letter-spacing:1px;
      color:#000;
      background:#ccc;
      opacity:.2;
      filter:alpha(opacity=20);
      padding:20px;
    }
    .deckItem .deckItemCopyright {
      position:absolute;
      font-size:10px;
      right:12px;
      bottom:12px;
      color:#fff;
      opacity:.5;
      filter:alpha(opacity=50);
    }
  </style>
</head>

<body>

<script type="text/javascript" src="../js/Uize.js"></script>

<h1 class="header">
  <a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
  <a href="../index.html" class="homeLinkText" title="UIZE JavaScript Framework home">UIZE JavaScript Framework</a>
</h1>

<div class="main">
  <h1 class="document-title">
    <a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
    Deck Swapper
    <div class="pageActionsShell">
      <div id="page-actions" class="pageActions"><a href="source-code/swap-deck.html" class="buttonLink">SOURCE</a></div>
    </div>
  </h1>

  <!-- explanation copy -->

  <div class="explanation">
    <p>In this example, an instance of the <a href="../reference/Uize.Widget.Swap.Deck.html"><code>Uize.Widget.Swap.Deck</code></a> class is wired up to a deck of divs in the document in order to provide a JavaScript animation transition effect when swapping from one item in the deck to another. Making the widget switch to another item with an accompanying transition effect is as simple as setting the widget's <code>itemNo</code> state property. Use the buttons below to switch among the different items in the deck.</p>
  </div>

  <!-- swap HTML layout with UI to be wired up -->

  <center id="page-buttons" style="margin-bottom:5px;"></center>

  <div id="page_swap" style="position:relative; width:500px; height:357px; border-width:10px; border-style:solid; margin:auto;" class="insetBorderColor">
    <div id="page_swap-item0" class="deckItem" style="background:url(http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228267745724726415&max_dim=500);">
      <div class="deckItemTitle">Flock of Clouds</div>
      <div class="deckItemDescription" style="left:8px; bottom:8px; width:200px; background:#fff;">
        An aerial view of a flock of fluffy white clouds travelling across the oceans of the Caribbean. The beautiful turquoise water is so clear and the landmass so shallow that you can see the sand banks.
      </div>
      <div class="deckItemCopyright">&copy; Chris van Rensburg</div>
    </div>
    <div id="page_swap-item1" class="deckItem" style="background:url(http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228855435929294206&max_dim=500);">
      <div class="deckItemTitle">Hook in the Wall</div>
      <div class="deckItemDescription" style="right:8px; top:60px; width:140px; background:#000; color:#888; opacity:.4; filter:alpha(opacity=40);">
        A single lonely hook is lost amongst a matrix of bricks. An outdoor lamp dimly lights the nighttime air and casts a gold hue over the scene. The unused hook stands out like a weed in a dirt field.
      </div>
      <div class="deckItemCopyright" style="left:12px; right:auto;">&copy; Chris van Rensburg</div>
    </div>
    <div id="page_swap-item2" class="deckItem" style="background:url(http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228550194293355740&max_dim=500);">
      <div class="deckItemTitle">Pier Before the Storm</div>
      <div class="deckItemDescription" style="left:8px; bottom:8px; width:444px; color:#ccc; background:#444; opacity:.7; filter:alpha(opacity=70);">
        A wave starts to break at the rust-stained concrete Pacifica Pier. In the foreground, the frothy remains of an earlier wave break churns away. The dramatic winter sky looks ready to burst with rain.
      </div>
      <div class="deckItemCopyright">&copy; Chris van Rensburg</div>
    </div>
    <div id="page_swap-item3" class="deckItem" style="background:url(http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228074575082103294&max_dim=500);">
      <div class="deckItemTitle">San Fran Sunset</div>
      <div class="deckItemDescription" style="right:8px; bottom:8px; width:130px; color:#000; background:#fff; opacity:.2; filter:alpha(opacity=20);">
        The setting sun flares through a gap between buildings at the Civic Center in San Francisco, California. Silhouetted buildings evoke mystery, while rows of lights echo the line of the sun flare.
      </div>
      <div class="deckItemCopyright" style="left:12px; right:auto;">&copy; Chris van Rensburg</div>
    </div>
    <div id="page_swap-item4" class="deckItem" style="background:url(http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228948359037055649&max_dim=500);">
      <div class="deckItemTitle">Setting Below Clouds</div>
      <div class="deckItemDescription" style="right:8px; top:60px; width:200px;">
        The winter sun sets below a dramatic bank of heavy clouds that head an incoming storm, while a solitary tree on a hillside watches on. The ocean is set alight with a path of shimmering orange.
      </div>
      <div class="deckItemCopyright" style="left:12px; right:auto;">&copy; Chris van Rensburg</div>
    </div>
    <div id="page_swap-item5" class="deckItem" style="background:url(http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228734547884666866&max_dim=500);">
      <div class="deckItemTitle">Windswept and Alone</div>
      <div class="deckItemDescription" style="left:8px; bottom:8px; width:300px; color:#ccc; background:#444; opacity:.7; filter:alpha(opacity=70);">
        A windswept tree stands lonely on a lush green hillside. Captured while hiking one afternoon at Milagra Ridge, Pacifica.
      </div>
      <div class="deckItemCopyright">&copy; Chris van Rensburg</div>
    </div>
  </div>
</div>

<!-- JavaScript code to make the static deck swap HTML "come alive" -->

<script type="text/javascript">

Uize.require (
  [
    'UizeSite.Page.Example.library',
    'UizeSite.Page.Example',
    'Uize.Widget.Swap.Deck',
    'Uize.Widgets.Container.Widget',
    'Uize.Widgets.Button.Widget'
  ],
  function () {
    'use strict';

    /*** create the example page widget ***/
      var page = window.page = UizeSite.Page.Example ({evaluator:function (code) {eval (code)}});

    /*** add the deck swap child widget ***/
      var swap = page.addChild (
        'swap',
        Uize.Widget.Swap.Deck,
        {
          totalItems:6,
          itemNo:0,
          crossFade:false,
          viewSeedSizeX:1,
          viewSeedSizeY:0,
          viewSeedAlignX:0,
          viewSeedAlignY:.5,
          dissolve:false,
          viewContentAlignX:'none',
          viewContentAlignY:'none'
        }
      );
      swap.fade.set ({duration:1000})

    /*** add the buttons for selecting items ***/
      var buttons = page.addChild ('buttons',Uize.Widgets.Container.Widget,{built:false});
      Uize.forEach (
        6,
        function (_itemNo) {
          buttons.addChild (
            'item' + _itemNo,
            Uize.Widgets.Button.Widget,
            {
              text:'Item ' + _itemNo,
              action:function () {swap.set ({itemNo:_itemNo})}
            }
          );
        }
      );

    /*** wire up the page widget ***/
      page.wireUi ();
  }
);

</script>

</body>
</html>