title: Adding zoom capability to Fancybox
body: <p>I wish to add the zoom capability to fancybox similar to Demo 1 here <a href="http://www.dynamicdrive.com/dynamicindex4/powerzoomer.htm" rel="nofollow">http://www.dynamicdrive.com/dynamicindex4/powerzoomer.htm</a></p>
  
  <p>The button helper available in fancybox are not adequate as the enlarge button only goes to the maximum size of the image.</p>
  
  <p>Although I’ve hardcoded this <code>fancybox-manual-b</code> if I get it working I’ll be doing this dynamically.</p>
  
  <p>First I tried adding an id to each image that appears in a fancybox and adding these to <code>jQuery(‘#Pic_1, #Pic_2, #Pic_3, #Pic_4’).addpowerzoom</code> but that didn’t work I think because the mouse hover action is already occupied by fancybox thus conflicting.</p>
  
  <p>Ideally this is how i'd like implement this but haven't got it to work </p>
  
  <p>So now I’m attempting to pass the image ref into an iframe</p>
  
  <p>On clicking “Zoom in Fancybox” a new blank tab opens and the fancybox opens in the parent but no image just Hello Holly.</p>
  
  <p>Just to complicate matters I need to make this work using jquery version 1.4.4 as this is used within WordPress.</p>
  
  <p>Please suggest what I'm doing wrong</p>
  
  <p>Parent html</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;fancyBox - Fancy jQuery Lightbox Alternative | Demonstration&lt;/title&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
  
     &lt;!-- Add jQuery library --&gt;
  
     &lt;script type='text/javascript' src='../js/jquery/jquery.js'&gt;&lt;/script&gt;
      &lt;!-- Add mousewheel plugin (this is optional) --&gt;
      &lt;script type="text/javascript" src="../lib/jquery.mousewheel-3.0.6.pack.js"&gt;&lt;/script&gt;
  
      &lt;!-- Add fancyBox main JS and CSS files --&gt;
      &lt;script type="text/javascript" src="../source/jquery.fancybox.js?v=2.0.6"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.0.6" media="screen" /&gt;
  
      &lt;!-- Add Button helper (this is optional) --&gt;
      &lt;link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-buttons.css?v=1.0.2" /&gt;
      &lt;script type="text/javascript" src="../source/helpers/jquery.fancybox-buttons.js?v=1.0.2"&gt;&lt;/script&gt;
  
      &lt;!-- Add Thumbnail helper (this is optional) --&gt;
      &lt;link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-thumbs.css?v=1.0.2" /&gt;
      &lt;script type="text/javascript" src="../source/helpers/jquery.fancybox-thumbs.js?v=1.0.2"&gt;&lt;/script&gt;
  
      &lt;!-- Add Media helper (this is optional) --&gt;
      &lt;script type="text/javascript" src="../source/helpers/jquery.fancybox-media.js?v=1.0.0"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript" src="../js/ddpowerzoomer.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
  
      jQuery(document).ready(function($) {
        $('a').each(function(){
  
           var Href = $(this).attr('href');
           if ((Href.match(/jpg/i)) || (Href.match(/jpeg/i)))
             {
             $(this).attr('class', "fancybox");
  
             }
            else
            {
            alert ("jessica");
              $(this).attr('target', 'blank');
            }
  
          });
        $('a &gt; img').each(function(){
  
          if($(this).parent('td'))
            {
  
              if($(this).parents().attr('target') == 'blank')
                {
                alert("Hello Holly " + $(this).attr('target'));
                $(this).removeAttr('target');
  
                }
              $(this).parent().attr('class', "fancybox-buttons");
              $(this).parent().attr('data-fancybox-group', "gallery" );
  
            }
  
  
  
      });
  
          $('.fancybox').fancybox();
  
           /*
            *  Button helper. Disable animations, hide close button, change title type and content
            */
  
           $('.fancybox-buttons').fancybox({
              openEffect  : 'none',
              closeEffect : 'none',
  
              prevEffect : 'none',
              nextEffect : 'none',
  
              closeBtn  : false,
  
              helpers : {
                 title : {
                    type : 'inside'
                 },
                 buttons  : {}
              },
  
              afterLoad : function() {
                 this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
              }
           });
              $("#fancybox-manual-b").click(function() {
                  $.fancybox.open({
                      href : 'hollyframe.html?1_b.jpg',
                      type : 'iframe',
                      padding : 5
                  });
              });
  
  
  });
  
    &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
          &lt;div&gt;
            &lt;table&gt;
              &lt;tr&gt;
                &lt;td&gt;&lt;a id="pic_1" href="1_b.jpg" title="Lorem ipsum dolor sit amet"&gt;&lt;img src="1_s.jpg" alt="" /&gt;&lt;/a&gt;
                &lt;/td&gt;
                &lt;td&gt;&lt;a id="pic_2" href="2_b.jpg" title="Etiam quis mi eu elit temp"&gt;&lt;img src="2_s.jpg" alt="" /&gt;&lt;/a&gt;
                &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;&lt;a id="pic_3" href="3_b.jpg" title="Cras neque mi, semper leon"&gt;&lt;img src="3_s.jpg" alt="" /&gt;&lt;/a&gt;&lt;/td&gt;
  
  
                &lt;td&gt;&lt;a id="pic_4" href="4_b.jpg" title="Sed vel sapien vel sem uno"&gt;&lt;img src="4_s.jpg" alt="" /&gt;&lt;/a&gt;&lt;/td&gt;
  
              &lt;/tr&gt;
            &lt;/table&gt;
          &lt;/div&gt;
          &lt;div&gt;
                &lt;h3&gt;Etiam quis mi eu elit&lt;/h3&gt;
                &lt;p&gt;
                    Lorem ipsum dolor sit amet,  &lt;a href="http://localhost/dweb/2692.htm"&gt;www.fancyapps.com/fancybox/&lt;/a&gt; consectetur adipiscing elit. Etiam &lt;a id="pic_5" href="5_b.jpg" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit"&gt;Graphic A&lt;/a&gt; quis mi eu elit tempor facilisis id et neque.
                &lt;/p&gt;
                &lt;p&gt;
                &lt;a href="jessica-alba-102.JPEG" title="Jessica Alba"&gt;Graphic A&lt;/a&gt;
                &lt;/p&gt;
                &lt;p&gt;
                &lt;a id="fancybox-manual-b" href="javascript:;"&gt;Zoom in Fancybox&lt;/a&gt;
                &lt;/p&gt;
      &lt;/div&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>hollyframe.html</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;
  &lt;html&gt;
    &lt;head&gt;
    &lt;meta http-equiv="content-type" content="text/html; charset=windows-1250"&gt;
    &lt;meta name="generator" content="PSPad editor, www.pspad.com"&gt;
    &lt;title&gt;&lt;/title&gt;
      &lt;script type="text/javascript"&gt;
      var myPic;
     function GetPic(){
       var url= window.location.href;
       var  bits =url.split("?");
       myPic = bits[1];
  
  
      }
     jQuery(document.createElement("img")).attr({src: myPic, id: 'Pic'});
  
      jQuery('#Pic').addpowerzoom({       defaultpower: 2,
          powerrange: [2,5],
          largeimage: null,
          magnifiersize: [100,100] //&lt;--no comma following last option!
      });
  
  
      &lt;/script&gt;
      &lt;/head&gt;
    &lt;body&gt;
         &lt;p&gt;Hello Holly&lt;/p&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>update code following JFK sugestions</strong></p>
  
  <p>i'v beeing playing with this all day and am strugiling to get it working</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  jQuery(document).ready(function($) {
    $('#Pzoom').fancybox(
            beforeShow: function(){
                 $('#fancybox-img').wrap(
          $('&lt;a /&gt;')
         .attr('href', this.href) // this.href gets the "href" of the current image
         .addClass('power-zoom')
         .attr('rel', "position: 'inside'")
  
       $(this.href).addpowerzoom({
          defaultpower: 2,
          powerrange: [2,5],
          largeimage: null,
          magnifiersize: [100,100] //&lt;--no comma following last option!
  
              }); 
    ); // wrap
      };
    );          
  });  // ready
  
    &lt;/script&gt;
  </code></pre>