SOURCE CODE: Slideshow of Data
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>Slideshow of Data | JavaScript Examples | UIZE JavaScript Framework</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="keywords" content="featured animation slideshow Uize.Widget.Bar Uize.Widget.Swap.Image Uize.Widget.SlideShow"/>
  <meta name="description" content="Who says that a slideshow can only be used to display an image? See this demo - it uses a slideshow to display nutritional data for various fruits."/>
  <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"/>
  <link rel="stylesheet" href="../css/widget.slideshow.css"/>
  <link rel="stylesheet" href="../css/widget.databar.css"/>
  <style type="text/css">
    /*** layout ***/
      tr.headings td {
        font-size:9px;
        padding:3px;
        border:none;
      }
  </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>
    Slideshow of Data
    <div class="pageActionsShell">
      <div id="page-actions" class="pageActions"><a href="source-code/slideshow-of-data.html" class="buttonLink">SOURCE</a></div>
    </div>
  </h1>

  <!-- explanation copy -->

  <div class="explanation">
    <p>One can be forgiven for thinking of a slideshow as being just about a series of photos. However, the <a href="../reference/Uize.Widget.SlideShow.html"><code>Uize.Widget.SlideShow</code></a> class is implemented to be generic, versatile, and agnostic as to the contents of the slides in the slide set. This allows us to have a slideshow focused on presenting data, where the data from each slide is represented by a series of widgets that are added as child widgets of the slideshow widget. In this example, a slideshow is presented of nutritional data for various fruits. Instances of <a href="../reference/Uize.Widget.Bar.html"><code>Uize.Widget.Bar</code></a> are used to represent the values of various nutritional properties. An instance of <a href="../reference/Uize.Widget.Swap.Image.html"><code>Uize.Widget.Swap.Image</code></a> is used to create a backdrop to the data bars that dissolves across transitions using a JavaScript animation effect.</p>
  </div>

  <!-- the slide set is defined in an external library so it can be shared by several pages -->

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

  <table class="slideshow" cellspacing="0" cellpadding="0" style="margin:auto;">
    <tr class="slideshowHeader" valign="top">
      <td align="left">
        <table border="0" cellspacing="0" cellpadding="0">
          <tr valign="top">
            <td><a id="page_slideShow_first" class="navButton" href="javascript://"><div class="arrow towardsFirst gotoFirst"></div></a></td>
            <td><a id="page_slideShow_previous" class="navButton" href="javascript://"><div class="arrow towardsFirst gotoPrevious"></div></a></td>
          </tr>
        </table>
      </td>
      <td align="center">
        <div id="page_slideShow-slide_name" style="font-family:Verdana; font-size:14px; text-transform:uppercase; letter-spacing:7px; margin-top:6px;">&nbsp;</div>
      </td>
      <td align="right">
        <table border="0" cellspacing="0" cellpadding="0">
          <tr valign="top">
            <td><a id="page_slideShow_next" class="navButton" href="javascript://"><div class="arrow towardsLast gotoNext"></div></a></td>
            <td><a id="page_slideShow_last" class="navButton" href="javascript://"><div class="arrow towardsLast gotoLast"></div></a></td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td colspan="3" align="center" valign="top" style="background:#000;">
        <div style="position:relative; width:695px; height:327px;">
          <!-- markup for the image swap widget -->
            <div id="page_slideShow_slideImage" style="position:absolute; left:0px; top:0px; width:695px; height:327px; background:#000; z-index:1; text-align:left;">
            </div>

          <!-- markup for the bars widgets -->
            <table cellspacing="2" cellpadding="0" style="position:absolute; left:0; top:0; z-index:2;">
              <tr class="headings">
                <td>Calories</td>
                <td>Total Fat</td>
                <td>Sat. Fat</td>
                <td>Cholesterol</td>
                <td>Sodium</td>
                <td>Total Carbs</td>
                <td>Dietary Fiber</td>
                <td>Sugars</td>
                <td>Protein</td>
                <td>Calcium</td>
                <td>Potassium</td>
              </tr>
              <tr>
                <td id="page_slideShow_slideCalories"></td>
                <td id="page_slideShow_slideTotalFat"></td>
                <td id="page_slideShow_slideSaturatedFat"></td>
                <td id="page_slideShow_slideCholesterol"></td>
                <td id="page_slideShow_slideSodium"></td>
                <td id="page_slideShow_slideTotalCarbs"></td>
                <td id="page_slideShow_slideDietaryFiber"></td>
                <td id="page_slideShow_slideSugars"></td>
                <td id="page_slideShow_slideProtein"></td>
                <td id="page_slideShow_slideCalcium"></td>
                <td id="page_slideShow_slidePotassium"></td>
              </tr>
            </table>
        </div>
      </td>
    </tr>
  </table>
</div>

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

<script type="text/javascript">

Uize.require (
  [
    'UizeSite.Page.Example.library',
    'UizeSite.Page.Example',
    'UizeSite.TestData.Fruits',
    'UizeSite.Templates.DataBar',
    'Uize.Widget.Bar',
    'Uize.Widget.Swap.Image',
    'Uize.Widget.SlideShow'
  ],
  function () {
    'use strict';

    /*** create the example page widget ***/
      var page = window.page = UizeSite.Page.Example ();

    /*** add the slide show child widget ***/
      var slideShow = page.addChild ('slideShow',Uize.Widget.SlideShow,{slides:UizeSite.TestData.Fruits ()});

      /*** add the image wipe widget as a child widget to the slide show widget ***/
        slideShow.addChild ('slideImage',Uize.Widget.Swap.Image,{width:695,height:327,built:false});

    /*** add bar child widgets to the slideshow widget for displaying the nutritional data ***/
      var
        nutritionProperties = UizeSite.TestData.Fruits.getNutritionProperties (),
        nutritionPropertiesLength = nutritionProperties.length
      ;
      for (var propertyNo = -1; ++propertyNo < nutritionPropertiesLength;) {
        var propertyName = nutritionProperties [propertyNo];
        slideShow.addChild (
          'slide' + Uize.capFirstChar (propertyName),
          Uize.Widget.Bar,
          Uize.copyInto (
            {
              html:UizeSite.Templates.DataBar,
              minValue:0,
              maxValue:1,
              increments:0,
              built:false,
              unit:UizeSite.TestData.Fruits.getPropertyUnit (propertyName)
            },
            UizeSite.TestData.Fruits.getValueBoundsForProperty (propertyName)
          )
        );
      }

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

</script>

</body>
</html>