title: combining fancybox with elevatezoom. the zoom is not working
body: <p>I am trying to set up multiple fancybox galleries WITH thumbnails and elevate zoom. so far i got all the former but can't get the zoom to show up. after searching i found this post <a href="https://stackoverflow.com/a/23883542/6774425">https://stackoverflow.com/a/23883542/6774425</a> which i followed but can't seem to get the zoom effect.</p>
  
  <p>here is my code.</p>
  
  <p>the html images are wrapped like this</p>
  
  <pre><code>&lt;a class="fancybox fancybox-image fancybox-thumbs" rel="gallery1" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/drizzle.jpg" /&gt;&lt;img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/drizzle.jpg" alt="" /&gt;&lt;/a&gt;
  </code></pre>
  
  <p>i used the same javascript, just changed the type of zoom</p>
  
  <pre><code>$(".fancybox").fancybox({
         afterShow: function() {
             $('.fancybox-image').elevateZoom({
               zoomType: "inner",
  cursor: "crosshair",
  zoomWindowFadeIn: 500,
  zoomWindowFadeOut: 750
             });
         }
        });
  </code></pre>
  
  <p>but i can't seem to get it to zoom. here is a <a href="http://codepen.io/soursocks/pen/GjKZag/" rel="nofollow noreferrer">codepen</a></p>
  
  <p>you can click the first image on the top left</p>
  
  <p>i think it should still zoom with those images sizes. but i tried some lager images as well and it didn't seem to make a difference, at least the last time i tried it</p>
  
  <p>=== 
  so with the help of Dekel i got this <a href="http://codepen.io/anon/pen/amoAOO" rel="nofollow noreferrer">http://codepen.io/anon/pen/amoAOO</a></p>
  
  <pre><code> &lt;div class="grid-item car"&gt;
      &lt;a class="fancybox fancybox-image fancybox-thumbs" rel="gallery1" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/drizzle.jpg" /&gt;&lt;img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/drizzle.jpg" alt="" /&gt;&lt;/a&gt;
    &lt;/div&gt;
  
  &lt;div class="hidden"&gt;
      &lt;a class="fancybox fancybox-image fancybox-thumbs" rel="gallery1"  href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/one-world-trade.jpg" /&gt;&lt;img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/one-world-trade.jpg" alt="" /&gt;&lt;/a&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>but there is a bug if the second image is smaller than the first and you mouse over the top left. the previous image will appear <a href="https://imgur.com/a/o6OGP" rel="nofollow noreferrer">http://imgur.com/a/o6OGP</a></p>
  
  <p><a href="http://codepen.io/soursocks/pen/GjKZag/?editors=1010" rel="nofollow noreferrer">http://codepen.io/soursocks/pen/GjKZag/?editors=1010</a></p>