SOURCE CODE: Uize.Widget.ThumbZoom

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
  <title>Uize.Widget.ThumbZoom | JavaScript Examples | UIZE JavaScript Framework</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="keywords" content="animation widget zoom Uize.Widget.ThumbZoom"/>
  <meta name="description" content="Astonish users with a slick animated image preview feature where a larger preview zooms out from a grid of thumbnail images. This demo shows you how."/>
  <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"/>
  <style type="text/css">
    /* IMPORTANT!!! If filter:alpha(opacity=x); is used to achieve the opacity change effect on mouseover in IE6, it completely hoses the browser, the hard drive goes completely nuts, and the system ultimately freezes up under incredible load */
    #page-thumbnails {
    #page-thumbnails a {
    #page-thumbnails a,
    #page-thumbnails a:link,
    #page-thumbnails a:visited,
    #page-thumbnails a:hover,
    #page-thumbnails a:active {
    #page-thumbnails a img {
      border:solid 1px #afbbb8;
    #page-thumbnails.over a img {
    #page-thumbnails a:hover img {
      border:solid 1px #bbb;
    #page-thumbnails br {


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

  <!-- explanation copy -->

  <div class="explanation">
    <p>In this example, an instance of the <a href="../reference/Uize.Widget.ThumbZoom.html"><code>Uize.Widget.ThumbZoom</code></a> widget class is created and wired up to the thumbnail images on the page. This is done by specifying the thumbnail <code>img</code> nodes through the <code>thumbNodes</code> state property on the <code>Uize.Widget.ThumbZoom</code> instance.</p>
    <p>The <code>Uize.Widget.ThumbZoom</code> class wires a lightweight, inline preview behavior to these images. The URL for the larger version of each image is found from the <code>href</code> of the <code>img</code> tag's containing <code>a</code> tag. This provides the benefits of SEO indexing of the large images, as well as a fallback behavior should JavaScript be disabled or some failure occurs (so, a progressive enhancement approach). When you click on a thumbnail, the larger version is loaded and zooms out from the thumbnail using a JavaScript animation effect. Moving the mouse dismisses the large view. This provides a lightweight and easily discoverable and learnable interaction that makes it quick to go from one preview to the next. Additionally, there is some very simple CSS and JavaScript as part of the page wiring that dims the grid when you mouse over it, but for the thumbnail that you mouse over, helping to make the thumbnails "pop".</p>

  <!-- grid containing lots and lots of thumbnail images -->

  <div id="page-thumbnails">
    <a href=""><img src="" alt="Braving the Onslaught"/></a>
    <a href=""><img src="" alt="Companion to a Sunset"/></a>
    <a href=""><img src="" alt="Concrete Eternity"/></a>
    <a href=""><img src="" alt="Corrugate It"/></a>
    <a href=""><img src="" alt="Crank It Up"/></a>
    <a href=""><img src="" alt="Driving Through the Rain"/></a>

    <a href=""><img src="" alt="Flock of Clouds"/></a>
    <a href=""><img src="" alt="Hail to the Opening"/></a>
    <a href=""><img src="" alt="Heavens Open Over Pedro"/></a>
    <a href=""><img src="" alt="Hook in the Wall"/></a>
    <a href=""><img src="" alt="Huddling Together"/></a>
    <a href=""><img src="" alt="Just a Visitor"/></a>

    <a href=""><img src="" alt="Out the Bus Window"/></a>
    <a href=""><img src="" alt="Pacifica Pier From Milagra"/></a>
    <a href=""><img src="" alt="Pier Before the Storm"/></a>
    <a href=""><img src="" alt="Rain Fall"/></a>
    <a href=""><img src="" alt="Retirement Home"/></a>
    <a href=""><img src="" alt="San Fran Sunset"/></a>

    <a href=""><img src="" alt="San Mateo Sunset"/></a>
    <a href=""><img src="" alt="Setting Below Clouds"/></a>
    <a href=""><img src="" alt="Shadow of the Past"/></a>
    <a href=""><img src="" alt="Stacks of Steel"/></a>
    <a href=""><img src="" alt="Sun Sets Soon at Sweeney"/></a>
    <a href=""><img src="" alt="Sun Through a Tree"/></a>

    <a href=""><img src="" alt="Sweeney Ridge Sunset"/></a>
    <a href=""><img src="" alt="Trees Meet Sky"/></a>
    <a href=""><img src="" alt="Twins"/></a>
    <a href=""><img src="" alt="Urban Heavens"/></a>
    <a href=""><img src="" alt="Window Lean"/></a>
    <a href=""><img src="" alt="Windswept and Alone"/></a>

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

<script type="text/javascript">

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

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

    /*** add the thumb zoom child widget ***/
      page.addChild (

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

    /*** wire up dimming of grid on mouseover ***/
      page.wireNode (
          mouseover:function () {page.setNodeProperties ('thumbnails',{className:'over'})},
          mouseout:function () {page.setNodeProperties ('thumbnails',{className:''})}