title: Amending image zoom logic
body: <p>I want to set lens on preview Pane and show perfect image into zoomer div but unable to fix it. I just convert my code from some javascript example and  I'm poor in javascript thats why i need help from some experts!</p>
  
  <p>my expectation like image below:</p>
  
  <p><a href="https://i.stack.imgur.com/ml0qc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ml0qc.png" alt="enter image description here"></a></p>
  
  <p>my current development like:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function(){
  $('.previewPane, #zoomer').css('background-image','url('+$('.imgkey').first().attr('src')+')');
  $('.imgkey').click(function(){
  $('.previewPane').css('background-image','url('+$(this).attr('src')+')');
     });
  $('.previewPane').mousemove(function(ev){
  $('#zoomer').css('display','inline-block');
  var img = $(this).css('background-image').replace(/^url\(['"](.+)['"]\)/, '$1');
  var posX = ev.offsetX ? (ev.offsetX) : ev.pageX - $(this).offset().left;
  var posY = ev.offsetY ? (ev.offsetY) : ev.pageY - $(this).offset().top;
  $('#zoomer').css('background-position',((-posX * 3) + "px " + (-posY * 3) + "px"));
  $('#zoomer').css('background-image','url('+img+')');
     });
  $('.previewPane').mouseleave(function(){$('#zoomer').css('display','none');});
    });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.imgkey{width:50px;height:50px;border:1px solid #ddd;}
  .previewPane{display:inline-block;border:1px solid #ddd;width:250px;height:250px;cursor:crosshair;background-repeat:no-repeat;background-position:center;background-size:100% 100%}
  #zoomer{display:none;background-repeat:no-repeat;border:1px solid #ddd;width:250px;height:250px;z-index:1000;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
   &lt;html&gt;
   &lt;head&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
   &lt;main&gt;
    &lt;div class="previewPane"&gt;&lt;/div&gt;&lt;div id="zoomer"&gt;&lt;/div&gt;
    &lt;div class="imgline"&gt;
     &lt;img class="imgkey" src="https://cdn.shopify.com/s/files/1/0622/2101/products/product-image-496137782_800x.jpg?v=1519622126"&gt;
     &lt;img class="imgkey" src="https://images-na.ssl-images-amazon.com/images/I/61IPCXn13AL._SX385_.jpg"&gt;
     &lt;img class="imgkey" src="https://http2.mlstatic.com/celular-smartphone-caterpillar-s60-negro-32-gb-D_NQ_NP_940281-MCO26572973595_122017-F.jpg"&gt;
    &lt;/div&gt;
   &lt;/main&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I also try your code with simple change like : just add this two line before       "$('.preview').each(function() { " but no luck.</p>
  
  <pre><code>$('.img-zoom-container').html('&lt;div class="preview"&gt;&lt;img class="image" src="'+$('.Key').first().attr('src')+'"&gt;&lt;/div&gt;');
  
  
  $('.Key').click(function(){
      $('.img-zoom-container').html('&lt;div class="preview"&gt;&lt;img class="image" src="'+$(this).attr('src')+'"&gt;&lt;/div&gt;');
  });
  </code></pre>
  
  <p>and images out side of 'img-zoom-container' like:</p>
  
  <pre><code>&lt;img class="Key" src="https://www.w3schools.com/howto/img_girl.jpg" width="200" height="200"&gt;
  &lt;img class="Key" src="https://placeimg.com/640/480/animals" width="200" height="200"&gt;
  &lt;img class="Key" src="https://placeimg.com/640/480/arch" width="200" height="200"&gt;
  </code></pre>