SOURCE CODE: Scrolly
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>Scrolly | JavaScript Examples | UIZE JavaScript Framework</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="keywords" content="featured animation Uize.Widget.Scrolly"/>
  <meta name="description" content="See the scrolly widget in action, as it scrolls two sets of thumbnails - horizontal and vertical - with an accompanying JavaScript animation effect."/>
  <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.scrolly.css"/>
  <style type="text/css">
    /*** styles for thumbnails ***/
      a.thumbnail, a.thumbnail:link, a.thumbnail:visited, a.thumbnail:hover, a.thumbnail:active  {
        border:none;
      }
      a.thumbnail img, a.thumbnail:link img, a.thumbnail:visited img {
        background:#fff;
        border:1px solid #aaa;
        opacity:.9;
        width:105px;
        height:75px;
        padding:0;
        margin:2px;
      }
      a.thumbnail:hover img, a.thumbnail:active img {
        border:1px solid #ccc;
        opacity:1;
      }

    /*** scrolly overrides ***/
      /*** horizontal scrolly ***/
        .scrollyHorz .scrollyView a img {
          margin-top:4px;
          margin-bottom:4px;
        }

      /*** vertical scrolly ***/
        .scrollyVert .scrollyView a {
          display:block;
        }
        .scrollyVert .scrollyView a img {
          margin-left:4px;
          margin-right:4px;
        }
  </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>
    Scrolly
    <div class="pageActionsShell">
      <div id="page-actions" class="pageActions"><a href="source-code/scrolly.html" class="buttonLink">SOURCE</a></div>
    </div>
  </h1>

  <!-- explanation copy -->

  <div class="explanation">
    <p>In this example, two instances of <a href="../reference/Uize.Widget.Scrolly.html"><code>Uize.Widget.Scrolly</code></a> are created - one for a horizontal scrolly, and the other for a vertical scrolly. Click on the scrolly navigation buttons to scroll a scrolly's view node, one "page" at a time, with an accompanying JavaScript animation effect. <b>Shift-click</b> on the navigation buttons to scroll all the way to the beginning or end. Also, because this example uses the <a href="../reference/Uize.Widget.ThumbZoom.html"><code>Uize.Widget.ThumbZoom</code></a> class, you can click on the thumbnails to get a zoom out preview.</p>
  </div>

  <table>
    <tr valign="top">
      <td>
        <!-- HTML for the horizontal scrolly's UI -->
        <div class="scrollyHorz">
          <a id="page_horzScrolly_left" href="javascript://" class="scrollyButton button">
            <div class="arrowLeft arrow"></div>
          </a>
          <div id="page_horzScrolly-view" class="scrollyView">
            <a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228277244419896914&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228277244419896914&max_dim=105" title="A Lighted Spot" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228109666540948246&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228109666540948246&max_dim=105" title="Braving the Onslaught" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228745103279879745&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228745103279879745&max_dim=105" title="Companion to a Sunset" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228866001826566384&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228866001826566384&max_dim=105" title="Concrete Eternity" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228321774790917687&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228321774790917687&max_dim=105" title="Corrugate It" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228463251413365530&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228463251413365530&max_dim=105" title="Crank It Up" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228507796122097730&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228507796122097730&max_dim=105" title="Driving Through the Rain" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228267745724726415&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228267745724726415&max_dim=105" title="Flock of Clouds" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228937676589416694&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228937676589416694&max_dim=105" title="Hail to the Opening" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228483162492178759&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228483162492178759&max_dim=105" title="Heavens Open Over Pedro" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228855435929294206&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228855435929294206&max_dim=105" title="Hook in the Wall" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228496639998196479&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228496639998196479&max_dim=105" title="Huddling Together" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228623703668130129&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228623703668130129&max_dim=105" title="Just a Visitor" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228897217554746467&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228897217554746467&max_dim=105" title="Out the Bus Window" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228554379238024970&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228554379238024970&max_dim=105" title="Pacifica Pier From Milagra"/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228550194293355740&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228550194293355740&max_dim=105" title="Pier Before the Storm" alt=""/></a>
          </div>
          <a id="page_horzScrolly_right" href="javascript://" class="scrollyButton button">
            <div class="arrowRight arrow"></div>
          </a>
        </div>
      </td>
      <td style="width:20px;"></td>
      <td>
        <!-- HTML for the vertical scrolly's UI -->
        <div class="scrollyVert">
          <a id="page_vertScrolly_up" href="javascript://" class="scrollyButton button">
            <div class="arrowUp arrow"></div>
          </a>
          <div id="page_vertScrolly-view" class="scrollyView">
            <a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228234695931308619&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228234695931308619&max_dim=105" title="Rain Fall" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228580091324147918&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228580091324147918&max_dim=105" title="Retirement Home" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228074575082103294&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228074575082103294&max_dim=105" title="San Fran Sunset" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228118804591686444&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228118804591686444&max_dim=105" title="San Mateo Sunset" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228948359037055649&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228948359037055649&max_dim=105" title="Setting Below Clouds" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228026937512483785&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228026937512483785&max_dim=105" title="Shadow of the Past" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228586025680090150&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228586025680090150&max_dim=105" title="Stacks of Steel" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228888824201666423&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228888824201666423&max_dim=105" title="Sun Sets Soon at Sweeney" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228484030353525473&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228484030353525473&max_dim=105" title="Sun Through a Tree" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228859576507617417&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228859576507617417&max_dim=105" title="Sweeney Ridge Sunset" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228620264277935845&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228620264277935845&max_dim=105" title="Trees Meet Sky" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228786228006249323&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228786228006249323&max_dim=105" title="Twins" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228225341102196754&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228225341102196754&max_dim=105" title="Urban Heavens" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228568520270882657&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228568520270882657&max_dim=105" title="Wave Abstract"/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228213464916914087&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228213464916914087&max_dim=105" title="Window Lean"/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228734547884666866&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228734547884666866&max_dim=105" title="Windswept and Alone"/></a>
          </div>
          <a id="page_vertScrolly_down" href="javascript://" class="scrollyButton button">
            <div class="arrowDown arrow"></div>
          </a>
        </div>
      </td>
    </tr>
  </table>
</div>

<!-- JavaScript code to wire up the scrollies and the "thumb zoom" behavior for the image thumbnails -->

<script type="text/javascript">

Uize.require (
  [
    'UizeSite.Page.Example.library',
    'UizeSite.Page.Example',
    'Uize.Widget.Scrolly',
    'Uize.Widget.ThumbZoom',
    'Uize.Curve.Rubber'
  ],
  function () {
    'use strict';

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

    /*** add the scrolly child widgets ***/
      page.addChild ('horzScrolly',Uize.Widget.Scrolly);
      page.addChild ('vertScrolly',Uize.Widget.Scrolly);

    /*** add the Uize.Widget.ThumbZoom child widget ***/
      page.addChild (
        'thumbZoom',
        Uize.Widget.ThumbZoom,
        {thumbNodes:{tagName:'A',className:'thumbnail'},imageValidator:null}
      );

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

</script>

</body>
</html>