title: Product Zoom Effect WooCommerce
body: <p>Im trying to create a zoom effect like this <a href="http://jsfiddle.net/SWDhG/" rel="nofollow">http://jsfiddle.net/SWDhG/</a>
  But I'm trying to open the <code>&lt;a href="imglink"&gt;</code> link not the <code>&lt;img src=""&gt;</code> tag, so i need som help with jquery.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="images"&gt; 
      &lt;a href="http://us.123rf.com/400wm/400/400/teddy2007b/teddy2007b0903/
          teddy2007b0903‌​00008/4539531-cup-and-bouquet-of-flowers-decorative-floral-
         background-for-banner-‌​vector.jpg" class="zoom" title=""&gt; 
       &lt;img src="http://3.bp.blogspot.com/-BKBDFTVyTVs/TdmU9SuHU5I/AAAAAAAAASk/
        e7oUIN34cc4/s‌​320/blue+salvia.jpg" class="attachment-shop_single wp-post-image"/&gt;
       &lt;/a&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>This is the original code</p>
  
  <pre><code>$(function() {
      $('li a').click(function() {
          $('div img').attr('src', $(this).find('img').attr('src'));
          $('div').show();
          return false;
      });
  
      $('div').mousemove(function(e){
          var h = $(this).find('img').height();
          var vptHeight = $(document).height();
          var y = -((h - vptHeight)/vptHeight) * e.pageY;
  
          $('div img').css('top', y + "px");
      });
  
      $('div').click(function(){
          $('div').hide();
      });
  });
  </code></pre>