SOURCE CODE: Slideshow With Dissolve
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 With Dissolve | JavaScript Examples | UIZE JavaScript Framework</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="keywords" content="animation slideshow Uize.Widget.SlideShow Uize.Widget.Bar"/>
  <meta name="description" content="See a slideshow demo that transitions from image to image with a JavaScript animation effect and that also displays rating stars using a bar widget."/>
  <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"/>
</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 With Dissolve
    <div class="pageActionsShell">
      <div id="page-actions" class="pageActions"><a href="source-code/slideshow-with-dissolve.html" class="buttonLink">SOURCE</a></div>
    </div>
  </h1>

  <!-- explanation copy -->

  <div class="explanation">
    <p>In this example, an instance of <a href="../reference/Uize.Widget.SlideShow.html"><code>Uize.Widget.SlideShow</code></a> is used to present a slideshow interface that allows us to step through a series of images. The images are displayed with a dissolve transition effect between them using JavaScript animation. This is achieved by using an instance of the <a href="../reference/Uize.Widget.Swap.Image.html"><code>Uize.Widget.Swap.Image</code></a> widget class, which is declared as a child widget of the slideshow widget, with a child widget name that maps it to the <code>image</code> property of the slide records. Each photo also has a rating, represented by the <code>rating</code> field contained in the record for each slide. An instance of <a href="../reference/Uize.Widget.Bar.html"><code>Uize.Widget.Bar</code></a> with a star decoration is used to represent the rating value, and this instance is added as a child widget to the slideshow widget - with a name that maps it to the <code>rating</code> record field.</p>

    <p>What's notable in this example is the use of the declarative syntax for widget adoption by the page widget. View the source code to appreciate this nuance. Notice the script tag that begins with <code>window.$page_slideShow = ...</code>. That's where all the magic is.</p>
  </div>

  <!-- the photos set is defined in an external library so it can be shared by several pages -->
  <script type="text/javascript" src="../js/UizeSite.js"></script>
  <script type="text/javascript" src="../js/UizeSite/TestData.js"></script>
  <script type="text/javascript" src="../js/UizeSite/TestData/Photos.js"></script>

  <!-- 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">
        <span id="page_slideShow-slide_title" class="slideshowTitle"></span><br/>
        <span class="slideshowSubtitle">(<span id="page_slideShow-slideNumber"></span> of <span id="page_slideShow-totalSlides"></span>)</span>
      </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">
        <div style="position:relative; width:350px; height:250px;">
          <!-- markup for the image swap widget -->
            <div id="page_slideShow_slideImage" style="position:absolute; left:0px; top:0px; width:350px; height:250px; background:#000; z-index:1; text-align:left;">
            </div>

          <!-- markup for the star rating bar widget -->
            <div style="position:absolute; left:5px; bottom:5px; width:100px; height:20px; z-index:2;">
              <div id="page_slideShow_slideRating-track" style="position:absolute; left:0; top:0; width:100px; height:20px;">
                <div id="page_slideShow_slideRating-empty" style="position:absolute; left:0; top:0; width:100px; height:20px; background:url(images/stars-empty.gif); opacity:.35; filter:alpha(opacity=35);"></div>
                <div id="page_slideShow_slideRating-full" style="position:absolute; left:0; top:0; width:100px; height:20px; background:url(images/stars-full.gif);"></div>
              </div>
            </div>
        </div>
      </td>
    </tr>
  </table>
</div>

<!-- declarative syntax that defines a widget tree for the slideshow -->

<script type="text/javascript">

window.$page_slideShow = {
  widgetClass:'Uize.Widget.SlideShow',
  slides:UizeSite.TestData.Photos ()
};

window.$page_slideShow_slideImage = {
  widgetClass:'Uize.Widget.Swap.Image',
  width:350,
  height:250,
  built:false
};

window.$page_slideShow_slideRating = {
  widgetClass:'Uize.Widget.Bar',
  orientation:'horizontal',
  minValue:0,
  maxValue:10
};

</script>

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

<script type="text/javascript">

Uize.require (
  [
    'UizeSite.Page.Example.library',
    'UizeSite.Page.Example'
  ],
  function () {(window.page = UizeSite.Page.Example ()).wireUi ()}
);

</script>

</body>
</html>