SOURCE CODE: Mantle Slideshow

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
  <title>Mantle Slideshow | 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.SlideShow.AutoAdvance Uize.Widget.SlideShow.AutoAdvance.WithSlideSelectors"/>
  <meta name="description" content="."/>
  <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/option-buttons-set.css"/>


<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>
    Mantle Slideshow
    <div class="pageActionsShell">
      <div id="page-actions" class="pageActions"><a href="source-code/slideshow-mantle.html" class="buttonLink">SOURCE</a></div>

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

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

  <div style="position:relative; width:350px; height:250px; margin:auto;">
    <!-- 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;">

  <table class="optionsShell" cellspacing="0" cellpadding="0">
      <td><div id="page_slideShow_options_option0" class="button">SLIDE 0</div></td>
      <td><div id="page_slideShow_options_option1" class="button">SLIDE 1</div></td>
      <td><div id="page_slideShow_options_option2" class="button">SLIDE 2</div></td>
      <td><div id="page_slideShow_options_option3" class="button">SLIDE 3</div></td>
      <td><div id="page_slideShow_options_option4" class="button">SLIDE 4</div></td>

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

<script type="text/javascript">

window.$page_slideShow = {

window.$page_slideShow_slideImage = {


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

<script type="text/javascript">

Uize.require (
  function () {( = UizeSite.Page.Example ()).wireUi ()}