title: binding a click event to jqzoom to launch fancybox
body: <p>So I've been playing around with this for a while, but cannot get the binded click event to fire  from a jqzoomed element.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="product-clicktozoom-image"&gt;
      &lt;div class="product-clicktozoom-image-main"&gt;
          &lt;a href="http://example.com/image.jpg" class="jqzoom" title="Image" rel="gall"&gt;&lt;img itemprop="image" id="mainimage" src="http://exampe.com/image.jpg" alt="Image" title="Image"/&gt;&lt;/a&gt;   
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>jQuery(document).load(function() {
      jQuery('#mainimage').bind('click',function(){
              var fancyImage = jQuery('#mainimage').attr('src');              
              jQuery.fancybox.open(fancyImage); 
      });
  });
  </code></pre>
  
  <p>jqzoom creates a couple of extra div's so the final page structure actually looks like this:</p>
  
  <pre><code>&lt;div class="product-clicktozoom-image-main"&gt;
      &lt;a href="example.com/image.jpg" class="jqzoom" title="" rel="gall" style="outline-style: none; text-decoration: none;"&gt;
          &lt;div class="zoomPad"&gt;
              &lt;img itemprop="image" id="mainimage" src="http://example.com/image.jpg" alt="Image" title="Image" style="opacity: 1;"&gt;
                  &lt;div class="zoomPup" style="display: none; top: 105px; left: 145px; width: 126px; height: 126px; position: absolute; border-width: 1px;"&gt;&lt;/div&gt;
                  &lt;div class="zoomWindow" style="position: absolute; z-index: 5001; cursor: default; left: 0px; top: 0px; display: none;"&gt;
                      &lt;div class="zoomWrapper" style="border-width: 1px; width: 355px; cursor: crosshair;"&gt;
                          &lt;div class="zoomWrapperTitle" style="width: 100%; position: absolute; display: none;"&gt;&lt;/div&gt;
                          &lt;div class="zoomWrapperImage" style="width: 100%; height: 355px;"&gt;
                              &lt;img src="http://example.com/image.jpg" style="position: absolute; border: 0px; display: block; left: -411.26760563380276px; top: -298.5915492957746px;"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="zoomPreload" style="visibility: hidden; top: 156px; left: 132.5px; position: absolute;"&gt;Loading zoom&lt;/div&gt;
          &lt;/div&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have tried binding the click event to the #mainimage, along with the zoomPad class and also the img within the zoomWrapperImage element as this appears to be the top element when you mouseover the image.</p>
  
  <p>All I want to do is open the full image in a fancybox if they click on the zoom (currently the zoom happens on mouseover). I know the fancybox.open(fancyImage); works, I can run the code in the click function directly in the console successfully, I just can't get it to fire from the click event itself.</p>
  
  <p>Help!</p>