SOURCE CODE: Slideshow of Data

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
  <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=""/>
  <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 {


<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>

<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>

  <!-- 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>

  <!-- 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>
      <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 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>
      <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;">

          <!-- markup for the bars widgets -->
            <table cellspacing="2" cellpadding="0" style="position:absolute; left:0; top:0; z-index:2;">
              <tr class="headings">
                <td>Total Fat</td>
                <td>Sat. Fat</td>
                <td>Total Carbs</td>
                <td>Dietary Fiber</td>
                <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>

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

<script type="text/javascript">

Uize.require (
  function () {
    'use strict';

    /*** create the example page widget ***/
      var 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 ***/
        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.copyInto (
              unit:UizeSite.TestData.Fruits.getPropertyUnit (propertyName)
            UizeSite.TestData.Fruits.getValueBoundsForProperty (propertyName)

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