SOURCE CODE: Tiled Zoom and Pan
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>Tiled Zoom and Pan | JavaScript Examples | UIZE JavaScript Framework</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="keywords" content="Uize.Widget.ImagePort.Draggable"/>
  <meta name="description" content="In this demo, an image is split into six image port tiles. A JavaScript animation zooms from seeing it repeated six times to seeing the large version."/>
  <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/selector-links.css"/>
  <style type="text/css">
    .mainUi {
      width:651px;
      margin:auto;
    }

    /*** image ports grid ***/
      .imagePortsGrid {
        position:relative;
        float:left;
        width:444px;
        height:318px;
        padding-left:1px;
        padding-top:1px;
        background:#000;
      }

      /*** image port ***/
        .imagePortsGrid .imagePort {
          position:relative;
          float:left;
          width:147px;
          height:105px;
          margin-right:1px;
          margin-bottom:1px;
          overflow:hidden;
        }
        .imagePortsGrid .imagePort img {
          position:absolute;
          cursor:pointer;
          border:none;
          width:500px;
          height:357px;
        }

    /*** selector links ***/
      .selectorLinks {
        float:left;
        width:200px;
        margin-left:6px;
      }
  </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>
    Tiled Zoom and Pan
    <div class="pageActionsShell">
      <div id="page-actions" class="pageActions"><a href="source-code/image-port-zoom-and-pan-tiled.html" class="buttonLink">SOURCE</a></div>
    </div>
  </h1>

  <!-- explanation copy -->

  <div class="explanation">
    <p>In this example, a 3x3 matrix of draggable image port widgets is set up. The <a href="../reference/Uize.Widget.ImagePort.Draggable.html"><code>Uize.Widget.ImagePort.Draggable</code></a> class wires up a view port to an image and lets you click-and-drag the image to pan the view of it. Holding the control modifier key while dragging up and down zooms in and out, respectively. Initially, the images are zoomed so that clicking-and-dragging will pan. When you select a new image from the list to the right of the grid, all the image port widgets will be set to display that image. The initial zoom level will show the entire image in each grid cell. Then, a <a href="../reference/Uize.Fade.html"><code>Uize.Fade</code></a> instance is used to fade the zoom amount so that each image port is zoomed out. The exact ending values for the <code>sizingValue</code>, <code>alignX</code>, and <code>alignY</code> state properties results in the various cells of the grid combining to form a faceted representation of the image as a whole - a neat effect. After selecting an image, now you can click-and-drag within the individual grid cells to "disrupt" the image to artistic effect.</p>
  </div>

  <div class="mainUi">
    <!-- the matrix of nine images that are cropped by parent nodes -->
    <div id="page-imagePortsGrid" class="imagePortsGrid">
      <!-- row 1 -->
        <div id="imagePort1" class="imagePort"><img id="imagePort1-image" src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228866001826566384&max_dim=500" title="" alt="Concrete Eternity"/></div>
        <div id="imagePort2" class="imagePort"><img id="imagePort2-image" src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228321774790917687&max_dim=500" title="" alt="Corrugate It"/></div>
        <div id="imagePort3" class="imagePort"><img id="imagePort3-image" src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228463251413365530&max_dim=500" title="" alt="Crank it Up"/></div>
      <!-- row 2 -->
        <div id="imagePort4" class="imagePort"><img id="imagePort4-image" src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228483162492178759&max_dim=500" title="" alt="Heavens Open Over Pedro"/></div>
        <div id="imagePort5" class="imagePort"><img id="imagePort5-image" src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228623703668130129&max_dim=500" title="" alt="Just a Visitor"/></div>
        <div id="imagePort6" class="imagePort"><img id="imagePort6-image" src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228760841280004992&max_dim=500" title="" alt="Ocean\'s Kiss"/></div>
      <!-- row 3 -->
        <div id="imagePort7" class="imagePort"><img id="imagePort7-image" src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228580091324147918&max_dim=500" title="" alt="Retirement Home"/></div>
        <div id="imagePort8" class="imagePort"><img id="imagePort8-image" src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228026937512483785&max_dim=500" title="" alt="Shadow of the Past"/></div>
        <div id="imagePort9" class="imagePort"><img id="imagePort9-image" src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228225341102196754&max_dim=500" title="" alt="Urban Heavens"/></div>
    </div>
    <div id="page-imageSelector" class="selectorLinks"></div>
    <div style="clear:left;"></div>
  </div>
</div>

<!-- JavaScript code to wire up the sequenced show and "thumb zoom" behavior for the image ports grid -->

<script type="text/javascript">

Uize.require (
  [
    'UizeSite.Page.Example.library',
    'UizeSite.Page.Example',
    'Uize.Widget',
    'Uize.Fade',
    'Uize.Widget.ImagePort.Draggable',
    'Uize.Curve'
  ],
  function () {
    'use strict';

    /*** create the example page widget ***/
      var page = window.page = UizeSite.Page.Example ({evaluator:function (code) {eval (code)}});

    /*** create and wire the ImagePort instances ***/
      var
        imagePorts = Uize.Widget.ImagePort.Draggable.spawn (
          {
            idPrefix:{className:'imagePort'},
            maxSizingValue:10,
            minSizingValue:1,
            sizingLowerBound:'0',
            sizingUpperBound:'fill',
            sizingValue:1,
            alignX:.5,
            alignY:.5
          },
          page
        ),
        imagePortsLength = imagePorts.length
      ;

    /*** utility functions ***/
      function getImagePortImageNode (imagePortNo) {return imagePorts [imagePortNo].getNode ('image')}

    /*** code for switching the image ***/
      var
        fade = Uize.Fade ({
          duration:1800,
          startValue:1,
          endValue:3,
          curve:Uize.Curve.easeInOutPow (5)
        }),
        totalRows = 3,
        totalColumns = 3
      ;
      fade.wire (
        'Changed.value',
        function () {Uize.callOn (imagePorts,'set',[{sizingValue:+fade}])}
      );
      function setImageForMatrix (imageSrc) {
        for (var imagePortNo = -1; ++imagePortNo < imagePortsLength;) {
          var
            rowNo = Math.floor (imagePortNo / totalColumns),
            columnNo = imagePortNo - rowNo * totalColumns
          ;
          imagePorts [imagePortNo].set ({
            sizingValue:1,
            alignX:columnNo / (totalColumns - 1),
            alignY:rowNo / (totalRows - 1)
          });
          getImagePortImageNode (imagePortNo).src = imageSrc;
        }
        setTimeout (function () {fade.start ()},1000);
      }

    /*** generate interface for changing the image set ***/
      var htmlChunks = ['<div class="exampleSectionHeading" style="margin:0;">CHANGE IMAGE</div>'];
      for (var imagePortNo = -1; ++imagePortNo < imagePortsLength;) {
        var imagePortNodeImg = getImagePortImageNode (imagePortNo);
        htmlChunks.push (
          '<a href="javascript://" class="buttonLink linkedJs" onfocus="this.blur ()" title="setImageForMatrix (\'' + imagePortNodeImg.src + '\')">' +
            '&nbsp;' + imagePortNodeImg.alt + '&nbsp;' +
          '</a>'
        );
      }
      page.injectNodeHtml ('imageSelector',htmlChunks.join (''));

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

</script>

</body>
</html>