SOURCE CODE: Mag View
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>Mag View | JavaScript Examples | UIZE JavaScript Framework</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="keywords" content="featured widget zoom Uize.Widget.MagView"/>
  <meta name="description" content="Experience the image magnifier widget that lets you see a zoomed in version of a highlighted area of an image, with support for multiple zoom levels."/>
  <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"/>
  <style type="text/css">
    .magViewShell {
      position:relative;
      left:100px;
    }
    .magViewShell, .magViewShell img {
      width:350px;
      height:250px;
    }

    /*** highlight ***/
      .magViewHighlight {
        position:absolute;
        width:1px;
        height:1px;
        display:none;
      }
      .magViewHighlight .magViewHighlightFill {
        position:absolute;
        width:100%;
        height:100%;
        background:#ccc;
        opacity:.15;
        filter:alpha(opacity=15);
      }
      .magViewHighlight .magViewHighlightBorder1, .magViewHighlight .magViewHighlightBorder2 {
        position:absolute;
        width:100%;
        height:100%;
      }
      .magViewHighlight .magViewHighlightBorder1 {
        border:2px solid #000;
        left:-1px;
        top:-1px;
      }
      .magViewHighlight .magViewHighlightBorder2 {
        border:1px solid #fff;
        left:0;
        top:0;
      }

    /*** mag image port ***/
      .magImagePortShell {
        position:absolute;
        width:250px;
        height:250px;
        display:none;
      }
      .magImagePortShell .magImagePortShadow {
        position:absolute;
        left:12px;
        top:-3px;
        width:250px;
        height:250px;
        background:#000;
        opacity:.75;
        filter:alpha(opacity=75);
      }
      .magImagePortShell .magImagePort {
        position:absolute;
        left:5px;
        top:-10px;
        width:250px;
        height:250px;
        overflow:hidden;
        z-index:1001;
        border:1px solid #777;
        background-color:#fff;
      }
      .magImagePortShell .magImagePortImage {
        position:absolute;
        width:700px;
        height:500px;
      }
      .magImagePortShell .magImagePortImage img {
        position:absolute;
        width:100%;
        height:100%;
      }

      /*** high res loading indicator ***/
        .magImagePortShell .magViewHighResLoading {
          position:absolute;
          left:0px;
          top:110px;
          font-size:20px;
          z-index:1002;
        }
        .magImagePortShell .magViewHighResLoading div {
          position:absolute;
          width:250px;
          text-align:center;
          color:#fff;
        }
  </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>
    Mag View
    <div class="pageActionsShell">
      <div id="page-actions" class="pageActions"><a href="source-code/mag-view.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.MagView.html"><code>Uize.Widget.MagView</code></a> is instantiated and wired up to provide a lightweight detail view interaction. When you mouse over the image, a magnified view appears to the right. The portion of the main image that is highlight by the square is shown larger on the right. The highlight follows the mouse as you move it. Clicking on the main image zooms in even further. Clicking again returns you to normal zoom. The zoom level change is accompanied by a JavaScript animation of both the highlight square in the main image and the magnified view on the right.</p>
  </div>

  <!-- mag view UI wireframe -->

  <div id="page_magView" class="magViewShell">
    <img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228026937512483785&max_dim=350" alt="Shadow of the Past"/>
    <div id="page_magView-highlight" class="magViewHighlight">
      <div class="magViewHighlightFill"></div>
      <div class="magViewHighlightBorder1"></div>
      <div class="magViewHighlightBorder2"></div>
    </div>
    <div id="page_magView-magImagePortShell" class="magImagePortShell">
      <div class="magImagePortShadow"></div>
      <div id="page_magView_magImagePort" class="magImagePort" style="width:250px; height:250px;">
        <div id="page_magView_magImagePort-image" class="magImagePortImage" style="width:750px; height:500px;">
          <img id="page_magView-magImageLowRes" src="../images/blank.gif" alt=""/>
          <img id="page_magView-magImageHighRes" src="../images/blank.gif" alt=""/>
        </div>
      </div>
      <div id="page_magView-highResLoading" class="magViewHighResLoading">
        <!-- outline - top row -->
          <div style="left:-1px; top:-1px;">Loading High Res</div>
          <div style="left:0px; top:-1px;">Loading High Res</div>
          <div style="left:1px; top:-1px;">Loading High Res</div>
        <!-- outline - middle row -->
          <div style="left:-1px; top:0px;">Loading High Res</div>
          <div style="left:1px; top:0px;">Loading High Res</div>
        <!-- outline - bottom row -->
          <div style="left:-1px; top:1px;">Loading High Res</div>
          <div style="left:0px; top:1px;">Loading High Res</div>
          <div style="left:1px; top:1px;">Loading High Res</div>
        <!-- main text -->
          <div style="left:0px; top:0px; color:#000;">Loading High Res</div>
      </div>
    </div>
  </div>
</div>

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

<script type="text/javascript">

Uize.require (
  [
    'UizeSite.Page.Example.library',
    'UizeSite.Page.Example',
    'Uize.Widget.MagView'
  ],
  function () {
    'use strict';

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

    /*** add the mag view child widget ***/
      page.addChild (
        'magView',
        Uize.Widget.MagView,
        {
          magImageLowResUrl:'http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228026937512483785&max_dim=350',
          magImageHighResUrl:function (_magPower) {
            return (
              this.get ('magImageLowResUrl').replace ('max_dim=350','max_dim=' + Math.round (350 * _magPower))
            )
          },
          magPowers:[1.4,3]
        }
      );

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

</script>

</body>
</html>