title: How do I get elevateZoom to position the lens at mouse cursor center?
body: <p>How do I get elevateZoom (<a href="http://www.elevateweb.co.uk/image-zoom" rel="nofollow">http://www.elevateweb.co.uk/image-zoom</a>) to position the lens at mouse-cursor center? The problem is that when I hover the main image the lens appears offset from my cursor. ElevateZoom's inserts the following two divs into the DOM positioned left: 86px and top: 178px. But I want the divs zoomContainer and zoomLens positioned at left: 0 top: 0.</p>
  
  <pre><code>&lt;div class="zoomContainer" style="position: absolute; left: 86px; top: 178px; height: 574px; width: 453px;"&gt;
      &lt;div class="zoomLens" style="background-position: 0px 0px; float: right; overflow: hidden; z-index: 999; opacity: 0.4; width: 201.333px; height: 200.875px; background-color: white; cursor: default; border: 1px solid black; background-repeat: no-repeat; position: absolute; left: 0px; top: 0px; display: none;"&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>Below is my code</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="images"&gt;
      &lt;div class="image current"&gt;
          &lt;span&gt;
              &lt;img id="zoom_01" src="img/product1_small.jpg" data-zoom-image="img/product1.jpg"&gt;
              &lt;div class="zoomContainer" style="position: absolute; left: 86px; top: 178px; height: 574px; width: 453px;"&gt;
                  &lt;div class="zoomLens" style="background-position: 0px 0px; float: right; overflow: hidden; z-index: 999; opacity: 0.4; width: 201.333px; height: 200.875px; background-color: white; cursor: default; border: 1px solid black; background-repeat: no-repeat; position: absolute; left: 0px; top: 0px; display: none;"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/span&gt;
      &lt;/div&gt;
      &lt;div id="zoomBox"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$("#zoom_01").elevateZoom({
      zoomWindowWidth: 400,
      zoomWindowHeight: 400,
      zoomType: 'window',
      zoomWindowPosition: 'zoomBox'
  });
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#zoomBox{
      position: absolute;
      width: 400px; height: 400px;
      right: -100%;
      border: 5px solid #000;
  }
  .image{
      display: table;
      position: absolute;
      left: 100%;
  }
  .image.current{
      left: 0;
  }
  .image span{
      display: table-cell;
      height: 100%;
      text-align: center;
      vertical-align: middle;
  }
  </code></pre>